Skip to content

Instantly share code, notes, and snippets.

@developit

developit/.gitignore

Last active December 4, 2019 09:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save developit/2d7ce06b18b0660d5c81e4879fd09fc8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save developit/2d7ce06b18b0660d5c81e4879fd09fc8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. developit revised this gist Mar 27, 2017. No changes.
  2. developit revised this gist Mar 27, 2017. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion package.json
    View file
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,6 @@
    "devDependencies": {
    "rollup": "^0.41.6",
    "rollup-plugin-buble": "^0.15.0",
    "rollup-plugin-bundle-size": "^1.0.1",
    "rollup-plugin-es3": "^1.0.3",
    "rollup-plugin-node-resolve": "^2.0.0",
    "rollup-plugin-scss": "^0.2.0",
  3. developit created this gist Mar 27, 2017.
    3 changes: 3 additions & 0 deletions .gitignore
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    .DS_Store
    node_modules
    dist
    13 changes: 13 additions & 0 deletions app.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    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>
    );
    11 changes: 11 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    <!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>
    5 changes: 5 additions & 0 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    import './style.css';
    import { h, render } from 'preact';
    import App from './app';

    render(<App />, document.body);
    20 changes: 20 additions & 0 deletions package.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    {
    "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-bundle-size": "^1.0.1",
    "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)"
    }
    31 changes: 31 additions & 0 deletions rollup.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    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()
    ]
    };
    20 changes: 20 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    .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); }
    }