Skip to content

Instantly share code, notes, and snippets.

@seedevk8s

seedevk8s/App.js

Forked from ibare/App.js
Created July 4, 2023 15:37
Show Gist options
  • Save seedevk8s/12eb2d1da5052d0cca310ed0268641f3 to your computer and use it in GitHub Desktop.
Save seedevk8s/12eb2d1da5052d0cca310ed0268641f3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @ibare ibare revised this gist Nov 26, 2020. 1 changed file with 0 additions and 63 deletions.
    63 changes: 0 additions & 63 deletions hook-react.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,63 +0,0 @@
    export let hook = [];
    let currentComponent = 0;

    export const useState = (initValue) => {
    const position = currentComponent;

    if (!hook[position]) {
    hook[position] = { hooks: [], hookIndex: -1 };
    }

    hook[position].hookIndex++;

    if (!hook[position].hooks[hook[position].hookIndex]) {
    hook[position].hooks[hook[position].hookIndex] = { state: initValue };
    }

    hook[position].componentName && console.log(hook[position].componentName);

    return [
    hook[position].hooks[hook[position].hookIndex].state,
    (v) => {
    hook[position].hooks[hook[position].hookIndex].state = v;
    }
    ];
    };

    function renderElement(node) {
    if (typeof node === "string") {
    return document.createTextNode(node);
    }

    if (node === undefined) return;

    const $el = document.createElement(node.type);

    node.children.map(renderElement).forEach((node) => {
    $el.appendChild(node);
    });

    return $el;
    }

    export function render(vdom, container) {
    container.appendChild(renderElement(vdom));
    currentComponent = 0;
    }

    export function createElement(type, props, ...children) {
    if (typeof type === "function") {
    if (hook[currentComponent]) {
    hook[currentComponent].hookIndex = -1;
    } else {
    hook[currentComponent] = { hookIndex: -1 };
    }

    hook[currentComponent].componentName = type.name;

    currentComponent++;

    return type.apply(null, [props, ...children]);
    }
    return { type, props, children };
    }
  2. @ibare ibare revised this gist Nov 11, 2020. 1 changed file with 63 additions and 0 deletions.
    63 changes: 63 additions & 0 deletions hook-react.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,63 @@
    export let hook = [];
    let currentComponent = 0;

    export const useState = (initValue) => {
    const position = currentComponent;

    if (!hook[position]) {
    hook[position] = { hooks: [], hookIndex: -1 };
    }

    hook[position].hookIndex++;

    if (!hook[position].hooks[hook[position].hookIndex]) {
    hook[position].hooks[hook[position].hookIndex] = { state: initValue };
    }

    hook[position].componentName && console.log(hook[position].componentName);

    return [
    hook[position].hooks[hook[position].hookIndex].state,
    (v) => {
    hook[position].hooks[hook[position].hookIndex].state = v;
    }
    ];
    };

    function renderElement(node) {
    if (typeof node === "string") {
    return document.createTextNode(node);
    }

    if (node === undefined) return;

    const $el = document.createElement(node.type);

    node.children.map(renderElement).forEach((node) => {
    $el.appendChild(node);
    });

    return $el;
    }

    export function render(vdom, container) {
    container.appendChild(renderElement(vdom));
    currentComponent = 0;
    }

    export function createElement(type, props, ...children) {
    if (typeof type === "function") {
    if (hook[currentComponent]) {
    hook[currentComponent].hookIndex = -1;
    } else {
    hook[currentComponent] = { hookIndex: -1 };
    }

    hook[currentComponent].componentName = type.name;

    currentComponent++;

    return type.apply(null, [props, ...children]);
    }
    return { type, props, children };
    }
  3. @ibare ibare revised this gist Nov 11, 2020. 3 changed files with 52 additions and 7 deletions.
    23 changes: 18 additions & 5 deletions App.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,18 +1,31 @@
    /* @jsx createElement */
    import { createElement, render } from "./tiny-react";
    import { createElement, render, Component } from './react.js';

    class Text extends Component {
    render() {
    return (
    <span>L({this.props.v})</span>
    );
    }
    }

    function Hello(props) {
    return <li className="item">{props.label}</li>;
    return <li className="item"><Text v={props.label} /></li>;
    }

    function App() {
    let x = 10;

    x = x ** x;

    return (
    <div>
    <h1>hello world</h1>
    <ul className="board" onClick={() => null}>
    <Hello label="Hello" />
    <Hello label="World" />
    <Hello label="React" />
    <Hello label="Hello balbla" />
    <Hello label={`hello ${x}`} />
    <Hello label="World 3" />
    <Hello label="React 4" />
    </ul>
    </div>
    );
    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": "tiny-react",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
    "build": "babel src -d build --plugins=@babel/proposal-class-properties -w",
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
    "@babel/cli": "^7.12.1",
    "@babel/core": "^7.12.3",
    "@babel/plugin-proposal-private-methods": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.5"
    }
    }
    16 changes: 14 additions & 2 deletions tiny-react.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,9 @@
    export class Component {
    constructor(props) {
    this.props = props;
    }
    }

    function renderElement(node) {
    if (typeof node === "string") {
    return document.createTextNode(node);
    @@ -20,7 +26,13 @@ export function render(vdom, container) {

    export function createElement(type, props, ...children) {
    if (typeof type === "function") {
    return type.apply(null, [props, ...children]);
    if (type.prototype instanceof Component) {
    const comp = new type({ ...props, children });
    return comp.render.call(comp);
    } else {
    return type.apply(null, [props, ...children]);
    }

    }
    return { type, props, children };
    }
    }
  4. @ibare ibare revised this gist Oct 27, 2020. No changes.
  5. @ibare ibare created this gist Sep 8, 2020.
    21 changes: 21 additions & 0 deletions App.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    /* @jsx createElement */
    import { createElement, render } from "./tiny-react";

    function Hello(props) {
    return <li className="item">{props.label}</li>;
    }

    function App() {
    return (
    <div>
    <h1>hello world</h1>
    <ul className="board" onClick={() => null}>
    <Hello label="Hello" />
    <Hello label="World" />
    <Hello label="React" />
    </ul>
    </div>
    );
    }

    render(<App />, document.getElementById("root"));
    26 changes: 26 additions & 0 deletions tiny-react.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    function renderElement(node) {
    if (typeof node === "string") {
    return document.createTextNode(node);
    }

    if (node === undefined) return;

    const $el = document.createElement(node.type);

    node.children.map(renderElement).forEach((node) => {
    $el.appendChild(node);
    });

    return $el;
    }

    export function render(vdom, container) {
    container.appendChild(renderElement(vdom));
    }

    export function createElement(type, props, ...children) {
    if (typeof type === "function") {
    return type.apply(null, [props, ...children]);
    }
    return { type, props, children };
    }