Skip to content

Instantly share code, notes, and snippets.

@developit
Last active June 28, 2017 17:08

Revisions

  1. developit revised this gist Jun 28, 2017. 1 changed file with 20 additions and 0 deletions.
    20 changes: 20 additions & 0 deletions *README.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    # Preact for Angular 1 Users

    Here's my quick attempt to build a tiny preact app using terminology from Angular 1.

    ### Installation

    ```sh
    # get it
    git clone https://gist.github.com/e5de4c33c1a8d8fd172905010d3ff75c.git preact-for-angular1-users
    cd preact-for-angular1-users

    # install the dependencies (just preact-cli)
    npm install

    # start a development server
    PORT=8080 npm start

    # build for production
    npm run build
    ```
  2. developit revised this gist Jun 28, 2017. 4 changed files with 22 additions and 14 deletions.
    2 changes: 2 additions & 0 deletions .gitignore
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    node_modules
    *.log
    14 changes: 10 additions & 4 deletions home-route.js
    Original file line number Diff line number Diff line change
    @@ -3,11 +3,17 @@ import { Component } from 'preact';
    import HomeView from './home-view.js'; // our view is just a JavaScript function

    export default class HomeRoute extends Component {
    // when mounted, grab a list of pizza topings from some API:
    state = {
    toppings: []
    };

    // when mounted, grab a list of pizza topings from an API:
    componentDidMount() {
    getPizzaTopings().then( toppings => {
    this.setState({ toppings });
    });
    fetch('//api.myjson.com/bins/vlder')
    .then( r => r.json() )
    .then( toppings => {
    this.setState({ toppings });
    });
    }
    render(props, state) {
    // "this component is-a <HomeView />"
    8 changes: 5 additions & 3 deletions app.js → index.js
    Original file line number Diff line number Diff line change
    @@ -10,10 +10,12 @@ export default class App extends Component {
    return (
    <div id="app">
    <Router>
    <HomeRoute url="/" default />
    <SomeOtherRoute url="/:foo" />
    <HomeRoute url="/" />
    <ErrorRoute default />
    </Router>
    </div>
    );
    }
    }
    }

    const ErrorRoute = () => <div class="error"><h1>Four, oh Four!</h1></div>
    12 changes: 5 additions & 7 deletions topping-directive.js
    Original file line number Diff line number Diff line change
    @@ -2,20 +2,18 @@
    import { Component } from 'preact';

    export default class Topping extends Component {
    // maybe the point of this Topping directive is to flash the item when it gets added
    // Let's pretend the point of this Topping "directive" is to flash the item when it gets added.
    // (this is obviously a contrived example that would be better done in CSS)
    componentDidMount() {
    this.base.style.background = 'palegoldenrod';
    this.base.style.transition = 'all 1s ease';
    setTimeout( () => {
    this.base.style.background = this.base.style.transition = null;
    }, 1000);
    this.base.style.transition = 'all 1s ease';
    this.base.style.background = null;
    }, 30);
    }

    render(props) {
    // even here you could kick your UI into a separate "template" function if you wanted:
    // return <ToppingView />

    // the render function is just like a view. you can split it out into a separate file if you wish.
    return (
    <li>
    {props.name} - ${props.price.toFixed(2)}
  3. developit revised this gist Jun 28, 2017. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions package.json
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,6 @@
    {
    "name": "preact-for-angular1-users",
    "version": "1.0.0",
    "scripts": {
    "start": "preact watch",
    "build": "preact build"
  4. developit created this gist Jun 28, 2017.
    19 changes: 19 additions & 0 deletions app.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    // This is our "App" - like everything else, it's just a component.
    // The only difference is we'll probably render this component into <body>.
    import { Component } from 'preact';
    import Router from 'preact-router';

    import HomeRoute from './home-route';

    export default class App extends Component {
    render() {
    return (
    <div id="app">
    <Router>
    <HomeRoute url="/" default />
    <SomeOtherRoute url="/:foo" />
    </Router>
    </div>
    );
    }
    }
    16 changes: 16 additions & 0 deletions home-route.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    // Note: normally you'd use folders like `routes/home/index.js` - Gist just doesn't allow them
    import { Component } from 'preact';
    import HomeView from './home-view.js'; // our view is just a JavaScript function

    export default class HomeRoute extends Component {
    // when mounted, grab a list of pizza topings from some API:
    componentDidMount() {
    getPizzaTopings().then( toppings => {
    this.setState({ toppings });
    });
    }
    render(props, state) {
    // "this component is-a <HomeView />"
    return <HomeView toppings={state.toppings} />
    }
    }
    13 changes: 13 additions & 0 deletions home-view.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    import Topping from './topping-directive.js';

    export default function HomeView({ toppings }) {
    // A "view" is just a function that produces UI, like a template: data in, UI out.
    // Inside the {braces} is just plain-old-JavaScript.
    return (
    <ul>
    { toppings.map( topping =>
    <Topping name={topping.name} price={topping.price} />
    ) }
    </ul>
    );
    }
    10 changes: 10 additions & 0 deletions package.json
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    {
    "name": "preact-for-angular1-users",
    "scripts": {
    "start": "preact watch",
    "build": "preact build"
    },
    "dependencies": {
    "preact-cli": "*"
    }
    }
    25 changes: 25 additions & 0 deletions topping-directive.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    // still just another component, but we're calling this one a directive since it's low-level stuff.
    import { Component } from 'preact';

    export default class Topping extends Component {
    // maybe the point of this Topping directive is to flash the item when it gets added
    // (this is obviously a contrived example that would be better done in CSS)
    componentDidMount() {
    this.base.style.background = 'palegoldenrod';
    this.base.style.transition = 'all 1s ease';
    setTimeout( () => {
    this.base.style.background = this.base.style.transition = null;
    }, 1000);
    }

    render(props) {
    // even here you could kick your UI into a separate "template" function if you wanted:
    // return <ToppingView />

    return (
    <li>
    {props.name} - ${props.price.toFixed(2)}
    </li>
    );
    }
    }