Skip to content

Instantly share code, notes, and snippets.

@developit

developit/.gitignore

Last active December 4, 2019 09:31
Show Gist options
  • Save developit/2d7ce06b18b0660d5c81e4879fd09fc8 to your computer and use it in GitHub Desktop.
Save developit/2d7ce06b18b0660d5c81e4879fd09fc8 to your computer and use it in GitHub Desktop.
Download ZIP
it's actually 3.9kb
Raw
.gitignore
.DS_Store
node_modules
dist
Raw
app.js
import { h } from 'preact';
export default () => (
<div class="App">
<div class="App-header">
<img src="/logo.svg" class="App-logo" alt="logo" />
<h2>Welcome to Preact</h2>
</div>
<p class="App-intro">
To get started, edit <code>src/App.html</code> then save and reload.
</p>
</div>
);
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Preact</title>
<link rel="stylesheet" href="dist/bundle.css">
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
Raw
index.js
import './style.css';
import { h, render } from 'preact';
import App from './app';
render(<App />, document.body);
Raw
package.json
{
"name": "preact-hello-world",
"version": "0.1.0",
"dependencies": {
"preact": "^7.2.1"
},
"devDependencies": {
"rollup": "^0.41.6",
"rollup-plugin-buble": "^0.15.0",
"rollup-plugin-es3": "^1.0.3",
"rollup-plugin-node-resolve": "^2.0.0",
"rollup-plugin-scss": "^0.2.0",
"rollup-plugin-uglify": "^1.0.1"
},
"scripts": {
"build": "rollup -c"
},
"author": "Jason Miller <jason@developit.ca> (http://jasonformat.com)"
}
Raw
rollup.config.js
import nodeResolve from 'rollup-plugin-node-resolve';
import buble from 'rollup-plugin-buble';
import scss from 'rollup-plugin-scss';
import uglify from 'rollup-plugin-uglify';
import es3 from 'rollup-plugin-es3';
export default {
entry: 'index.js',
dest: 'dist/bundle.js',
format: 'iife',
external: [],
plugins: [
scss({
output: true,
output: 'dist/bundle.css'
}),
buble({
jsx: 'h'
}),
nodeResolve({
modules: true,
jsnext: true
}),
uglify({
comments: false,
mangle: { toplevel: true },
mangleProperties: { regex: /^_/ }
}),
es3()
]
};
Raw
style.css
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-intro {
font-size: large;
}
@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment