lithent 0.31.1 → 0.32.0

package/README.md

@@ -1,200 +1,92 @@
-# litheNT Basic Usage
+# lithent
 
-litheNT is a virtualDOM implementation library that behaves similarly to React.
+> A lightweight Virtual DOM UI library
 
-[production motive](https://medium.com/p/d14ba89373d3)
+Lithent were developed to make it easy to insert Virtual DOM component
+fragments into pages already drawn with SSR, and are intended to be
+used lightly with other libraries.
 
-A simpler style of library inspired by Reactjs.
+`(9.54 KiB / gzip: 3.54 KiB)`
 
-The idea of litheNT is to keep the value associated with a `component` as a closure.
+## 🚩 Table of Contents
+* [Basic Guide](#basic-guide)
+* [How To Install](#how-to-install)
+  * [Width HTM](#with-htm)
+  * [Width JSX](#with-jsx)
+* [Examples](#examples)
+* [Develop Guide](#develop-guide)
 
-There aren't as many rules as in React, you just need to know how closures work in JSX and JavaScript.
+## Basic Guide
 
-## Install
+* https://superlucky84.github.io/lithent/
+
+## How To Install
 
 ```bash
 pnpm add lithent 
 ```
 
-## Using JSX
+#### With HTM
 
-Please include the JSX option in the build tool you use.
+* [Htm Github](https://github.com/developit/htm)
 
-```js
-// vite.config.js
-
-export default defineConfig({
-  ...
-  esbuild: {
-    jsxFactory: 'h',
-    jsxFragment: 'Fragment',
-  },
-  ...
-});
+```bash
+pnpm add -D htm
 ```
 
-## Example
-
-```jsx
-// example.jsx
-import {
-  h,
-  Fragment,
-  render,
-  ref,
-  mountCallback,
-  updateCallback,
-  mount,
-} from 'lithent';
-import { state, computed, effect, store } from 'lithent-helper';
-
-// This is the "mount" function.
-// This function is only executed on mount, and on update, only updates `props` and then executes the internal return function.
-// childen is passed as the second argument.
-const ChildComponent = mount<{ parentValue: number }>(
-  (renew, props, children) => {
-    // The value is used as a "getter" to make it easy to get and write to in the higher-order functions it returns
-    const count = state<number>(1, renew);
-    const text = state<string>(
-      '"destructuring" the "props" value directly from the mount function will cause referencing issues, so if you want to use it, you need to "destructuring" it from the internal function (updater).',
-      renew
-    );
-    const getParentValue = () => props.parentValue;
-    const parentValueFromMount = props.parentValue;
-    const summ = computed<number>(
-      () => count.v + notRefValue + props.parentValue
-    );
-
-    const localStore = store<{ text: string; count: number }>({
-      text: 's',
-      count: 0,
-    })(renew);
-    /*
-    // To share a store, make it externally and use `asign`.
-    const asignStore = store<{ text: string; count: number }>({ text: 's', count: 0 });
-
-    const sharedStore = asignStore(nenew);
-    */
-
-    // Even if you don't use a ref, the private value is always maintained as a regular variable.
-    let notRefValue = props.parentValue;
-
-    // Ref is only used to reference the DOM.
-    const domRef = ref(null);
-
-    const increase = () => {
-      count.v = count.v + 1;
-      notRefValue += 1;
-    };
-
-    const handleInputChane = (event: InputEvent) => {
-      text.v = (event.target as HTMLInputElement).value;
-    };
-
-    const localStoreUpdate = () => {
-      localStore.count += 1;
-      localStore.text += '1';
-    };
-
-    const handleMounted = () => {
-      console.log('MOUNTED', domRef);
-
-      return () => console.log('UNMOUNT');
-    };
-    const handleUpdated = () => {
-      console.log('UPDATE - parentValue');
-
-      return () => console.log('UPDATED');
-    };
-
-    mountCallback(handleMounted);
-    updateCallback(handleUpdated, () => [props.parentValue]); // Only Defs Updated (using a closure to update a value)
-
-    // Behaves like `react`'s `useEffect`
-    effect(
-      () => console.log('INJECT'),
-      () => console.log('CLEAN_UP'),
-      () => [count.v]
-    );
-
-    // Wrap in a function and return (using a closure to hold the value)
-    // This is the "update" function.
-    return ({ parentValue }) => (
-      <Fragment>
-        {/* Note that the event is onInput (we use the native event name to avoid confusion). */}
-        <div>
-          <textarea
-            value={text.v}
-            onInput={handleInputChane}
-            style={{ width: '300px', height: '100px' }}
-          />
-        </div>
-        <div>{text.v}</div>
-        <div>
-          <div style={{ color: 'blue' }}>
-            parentValueFromRef: {props.parentValue} (working)
-          </div>
-          <div style={{ color: 'blue' }}>
-            parentValueFromFunction: {getParentValue()} (working)
-          </div>
-          <div style={{ color: 'blue' }}>
-            parentValueFromUpdaterDestructuring: {parentValue} (working)
-          </div>
-          <div style={{ color: 'red' }}>
-            parentValueFromMounterDestructuring: {parentValueFromMount} (not
-            working)
-          </div>
-        </div>
-        <div>
-          <div ref={domRef}>count: {count.v}</div>
-          <div>sum: {count.v + notRefValue + props.parentValue}</div>
-          <div>sum(computed): {summ.v}</div>
-          {/* It doesn't pull it out from under the reference, it uses the value directly, so you can just use it. */}
-          <div>notRefValue: {notRefValue}</div>
-          <div>localStore(text): {localStore.text}</div>
-          <div>localStore(count): {localStore.count}</div>
-        </div>
-        <button onClick={increase}>Increase</button>
-        <button onClick={localStoreUpdate}>localStoreUpdate</button>
-        {children}
-      </Fragment>
-    );
-  }
+```js
+import { h, render, mount } from 'lithent';
+import htm from 'htm';
+const html = htm.bind(h);
 );
+```
+
+#### With JSX
+
+* [Setting Guide](https://superlucky84.github.io/lithent/#install)
+
+## Examples
+
+* [More Examples](https://superlucky84.github.io/lithent/#examples)
 
-const Root = mount(renew => {
-  const parentNumber = state<number>(7, renew);
-
-  const increaseParent = () => {
-    parentNumber.v = parentNumber.v + 1;
-  };
-
-  const decreaseParent = () => {
-    parentNumber.v = parentNumber.v - 1;
-  };
-
-  return () => (
-    <Fragment>
-      <ChildComponent parentValue={parentNumber.v}>
-        <button onClick={increaseParent}>Increase - Parent</button>
-      </ChildComponent>
-      <button onClick={decreaseParent}>Decrease - Parent</button>
-    </Fragment>
-  );
+```js
+import { h, render, mount, Fragment } from 'lithent';
+import { state } from 'lithent/helper';
+import htm from 'htm';
+const html = htm.bind(h);
+
+const Component = mount((r, _props) => {
+  const count = state(0, r);
+
+  const change = () => (count.v += 1);
+
+  // Updater
+  return () => html`
+    <${Fragment}>
+      <li>count: ${count.v}</li>
+      <button onClick=${change}>increase</button>
+    <//>
+  `;
 });
 
-render(<Root />, document.getElementById('root'));
+// insertBefore
+// render(`<${Component} />`, document.getElementById('root'), document.getElementById('nextElement'));
+
+// appendChild
+render(html`<${Component} />`, document.getElementById('root'));
 ```
 
-# Develop
+## Develop Guide
+
+It's open source, so you can develop and contribute together.
 
-## pnpm install (this project was created using pnpm.)
+### pnpm install (this project was created using pnpm.)
 
 ```bash
 npm install -g pnpm
 ```
 
-## project install
+### project install
 ```bash
 git clone https://github.com/superlucky84/lithent.git
 
@@ -203,23 +95,12 @@ cd lithent
 pnpm install
 ```
 
-## project build
+### project build
 ```bash
-pnpm build:all
+pnpm build
 ```
 
-## Running the development environment
+### Running the development environment
 ```bash
-pnpm dev
+pnpm dev // or pnpm dev:core
 ```
-
----
-
-# Packages
-
-## lithent
-
-## helper 
-
-## router
-

package/dist/diff.d.ts

@@ -1,14 +1,2 @@
-/**
- * 변경점의 컴포넌트로 부터 기존트리와 상태를 비교하며 새로 가상돔 트리를 새로 만든다.
- * (오리지널 가상돔으로 부터 유의미한 상태를 유지해야 하는 경우를 판별하여 새로운 트리를 만듬)
- *
- * 1. 동일한 트리의 위치해 있고 오리지널과 컴포넌트의 타입이 같은경우 기존 상태를 계승한다.
- * 2. 동일한 컴포넌트가 아니라고 판단되는 경우에는 기존 상태를 무시하는 새로운 트리를 생성한다.
- * 3. fragment타입의 경우에는 children의 갯수까지 같아야지 같은 타입이라고 판단한다.
- * 4. loop타입의 자식들은 같은 키값을 가졌는지로 동일한지 판단하며 키값이 없을경우 fragment타입처럼 취급한다.
- */
 import { WDom, TagFunctionResolver } from './types';
-export declare const makeNewWDomTree: ({ originalWDom, newWDom, }: {
-    originalWDom?: WDom | undefined;
-    newWDom: WDom | TagFunctionResolver;
-}) => WDom;
+export declare const makeNewWDomTree: (newWDom: WDom | TagFunctionResolver, originalWDom?: WDom) => WDom;