~evanj/wigly

76091043b0ef1e84ae528e72788c5cfaf0bc6dc5 — Evan M Jones 2 years ago 8cd3e9c
docs
4 files changed, 95 insertions(+), 79 deletions(-)

M README.md
M example/main.jsx
M package-lock.json
M package.json
M README.md => README.md +36 -7
@@ 11,22 11,22 @@ A React inspired, component-based UI library for the web. Built with Superfine. 
## 'Hello, World!' example

```javascript
import { h, render } from "wigly";
import wigly from "wigly";

function App(props) {
  return <div>{props.greeting}, World!</div>;
}

render(<App greeting="Hello" />, document.body);
wigly.render(<App greeting="Hello" />, document.body);
```

## Stateful counter example

```javascript
import { h, render, useState } from "wigly";
import wigly, { useState } from "wigly";

function Counter() {
  var [count, set] = useState(0);
  var [count, set] = wigly.useState(0);
  return (
    <div>
      <h1>Count: {count}</h1>


@@ 35,13 35,13 @@ function Counter() {
  );
}

render(<Counter />, document.body);
wigly.render(<Counter />, document.body);
```

## Using AJAX calls

```javascript
import { h, render, useState, useEffect } from "wigly";
import wigly, { useState, useEffect } from "wigly";

function App(props) {
  var [username, set] = useState();


@@ 65,5 65,34 @@ function App(props) {
  );
}

render(<App userId={123} />, document.body);
wigly.render(<App userId={123} />, document.body);
```

## Advanced, creating a 'styled-components' package

```javascript
import wigly, { useState, useEffect } from "wigly";
import tags from "dom-tags";
import stringcss from "string-css";

let styled = tags.reduce(
  (fns, key) => ({
    ...fns,
    [key]: style => props => {
      let [classes] = useState(stringcss.css(style));
      useEffect(stringcss.inject, 0);
      return wigly.h(key, { ...props, class: props.class ? `${classes} ${props.class}` : classes });
    }
  }),
  {}
);

let Title = styled.h1`
  color: #121212;
  font-family: nyt-cheltenham, georgia, "times new roman", times, serif;
  font-weight: 700;
  font-style: italic;
`;

wigly.render(<Title>Your Styled Component Here</Title>, document.body);
```

M example/main.jsx => example/main.jsx +34 -61
@@ 1,68 1,41 @@
// @jsx h
import { h, render, useState, useEffect } from "../src/wigly";
import styled, { inject } from "./styled-wigly";

let Wowza = styled.div`
  background: grey;
`;

let Deep = () => {
  useEffect(() => {
    console.log("Deep mounted");
    return () => console.log("Deep destroyed");
  }, 0);

  return <div>lifecycle test</div>;
};

let Test = ({ other }) => {
  let [msg, setMsg] = useState("wow!");

  useEffect(() => {
    console.log("Test mounted");
    return () => console.log("Test destroyed");
  }, 0);

  return (
    <div>
      <h2>Child {other}</h2>
      <div>{msg || "____"}</div>
      <input oninput={event => setMsg(event.target.value)} />
      <Deep />
    </div>
  );
};

let Scene = ({ displayLast }) => {
  return (
    <div>
      <Test key={0} other={"1"} />
      {displayLast && <Test key={1} other={"2"} />}
    </div>
// @jsx wigly.h
import wigly, { useState, useEffect } from "../";
import "babel-polyfill";

function App(props) {
  var [username, setUsername] = useState();
  var [error, setError] = useState();

  useEffect(
    async function() {
      try {
        var request = await fetch(`/get/user/${props.userId}`);
        var result = await request.json();
        setUsername(result.username);
      } catch (e) {
        setError(e.toString());
      }
    },
    [props.userId]
  );
};

let App = () => {
  let [msg, setMsg] = useState("wow!");
  let [count, setCount] = useState(0);

  let oninput = event => {
    setMsg(event.target.value);
    setCount(count + 1);
  };

  return (
    <div>
      <Wowza>Wowza</Wowza>
      <h2>Parent</h2>
      <div>{msg || "____"}</div>
      <input oninput={oninput} />
      <div>
        <Scene displayLast={count % 3 !== 0} />
      </div>
      {(() => {
        switch (true) {
          case !!error: {
            return error;
          }
          case !!username: {
            return <h1>Username: {username}</h1>;
          }
          default: {
            return "loading...";
          }
        }
      })()}
    </div>
  );
};
}

render(<App />, document.body);
inject();
wigly.render(<App userId={123} />, document.body);

M package-lock.json => package-lock.json +24 -11
@@ 1,6 1,6 @@
{
  "name": "wigly",
  "version": "0.3.4",
  "version": "0.3.5",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {


@@ 2016,6 2016,25 @@
      "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=",
      "dev": true
    },
    "babel-polyfill": {
      "version": "6.26.0",
      "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
      "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
      "dev": true,
      "requires": {
        "babel-runtime": "^6.26.0",
        "core-js": "^2.5.0",
        "regenerator-runtime": "^0.10.5"
      },
      "dependencies": {
        "regenerator-runtime": {
          "version": "0.10.5",
          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
          "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=",
          "dev": true
        }
      }
    },
    "babel-preset-jest": {
      "version": "23.2.0",
      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-23.2.0.tgz",


@@ 4862,14 4881,12 @@
        "balanced-match": {
          "version": "1.0.0",
          "bundled": true,
          "dev": true,
          "optional": true
          "dev": true
        },
        "brace-expansion": {
          "version": "1.1.11",
          "bundled": true,
          "dev": true,
          "optional": true,
          "requires": {
            "balanced-match": "^1.0.0",
            "concat-map": "0.0.1"


@@ 4889,8 4906,7 @@
        "concat-map": {
          "version": "0.0.1",
          "bundled": true,
          "dev": true,
          "optional": true
          "dev": true
        },
        "console-control-strings": {
          "version": "1.1.0",


@@ 5038,7 5054,6 @@
          "version": "3.0.4",
          "bundled": true,
          "dev": true,
          "optional": true,
          "requires": {
            "brace-expansion": "^1.1.7"
          }


@@ 5046,8 5061,7 @@
        "minimist": {
          "version": "0.0.8",
          "bundled": true,
          "dev": true,
          "optional": true
          "dev": true
        },
        "minipass": {
          "version": "2.2.4",


@@ 5151,8 5165,7 @@
        "number-is-nan": {
          "version": "1.0.1",
          "bundled": true,
          "dev": true,
          "optional": true
          "dev": true
        },
        "object-assign": {
          "version": "4.1.1",

M package.json => package.json +1 -0
@@ 16,6 16,7 @@
    "@babel/core": "^7.1.5",
    "@babel/plugin-transform-react-jsx": "^7.0.0",
    "ava": "^1.0.0-rc.1",
    "babel-polyfill": "^6.26.0",
    "browser-env": "^3.2.5",
    "dom-tags": "^1.0.0",
    "google-closure-compiler": "^20181008.0.0",