lithent 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 superlucky84
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,202 @@
+# Basic Usage
+
+Wwact is a virtualDOM implementation library that behaves similarly to React.
+
+[production motive](https://medium.com/p/d14ba89373d3)
+
+A simpler style of library inspired by Reactjs.
+
+The idea of wwact is to keep the value associated with a `component` as a closure.
+
+There aren't as many rules as in React, you just need to know how closures work in JSX and JavaScript.
+
+## Install
+
+```bash
+pnpm add wwact
+```
+
+## Using JSX
+
+Please include the JSX option in the build tool you use.
+
+```js
+// vite.config.js
+
+export default defineConfig({
+  ...
+  esbuild: {
+    jsxFactory: 'h',
+    jsxFragment: 'Fragment',
+  },
+  ...
+});
+```
+
+## Example
+
+```jsx
+// example.jsx
+import {
+  h,
+  Fragment,
+  render,
+  ref,
+  mountCallback,
+  updateCallback,
+  wwx,
+} from 'wwact';
+import { state, computed, effect } from 'wwact/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 = wwx<{ 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>('text', renew);
+    const getParentValue = () => props.parentValue;
+    const parentValue = props.parentValue;
+    const summ = computed<() => number>(
+      () => count.v + notRefValue + props.parentValue
+    );
+
+    // 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 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 () => (
+      <Fragment>
+        {/* Note that the event is onInput (we use the native event name to avoid confusion). */}
+        <input type="text" value={text.v} onInput={handleInputChane} />
+        <div ref={domRef}>count: {count.v}</div>
+        {/* When the value is updated from the parent component, the function declared inside is executed, so you need to use the `props.` call by reference to output the latest value of the updated property. */}
+        <div>parentValue: {props.parentValue} (working)</div>
+        <div>parentValue: {getParentValue()} (working)</div>
+        <div>parentValue: {parentValue} (not working)</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>
+        {children}
+        <button onClick={increase}>Increase</button>
+      </Fragment>
+    );
+  }
+);
+
+const Root = wwx(renew => {
+  const parentNumber = state<number>(7, renew);
+
+  const increaseParent = () => {
+    parentNumber.v = parentNumber.v + 1;
+  };
+
+  const decreaseParent = () => {
+    parentNumber.v = parentNumber.v - 1;
+  };
+
+  return () => (
+    <Fragment>
+      <button onClick={decreaseParent}>Decrease - Parent</button>
+      <div>
+        <ChildComponent parentValue={parentNumber.v}>
+          <button onClick={increaseParent}>Increase - Parent</button>
+        </ChildComponent>
+      </div>
+    </Fragment>
+  );
+});
+const root = <Root />;
+
+render(root, document.getElementById('root'));
+```
+
+# Develop
+
+## pnpm install (this project was created using pnpm.)
+
+```bash
+npm install -g pnpm
+```
+
+## project install
+```bash
+git clone https://github.com/superlucky84/wwact.git
+
+cd wwact
+
+pnpm install
+```
+
+## project build
+```bash
+pnpm build:all
+```
+
+## Running the development environment
+```bash
+pnpm dev:wwact
+```
+
+---
+
+# Packages
+
+## wwact
+
+Main module
+
+## router
+
+Hash routing extension
+
+## compiler
+
+Converter for using template syntax(.wwx)
+
+Can be used using `jsx` without using `wwx`
+
+## vitePlugin
+
+A plugin to connect the template syntax (wwx) and the transpiler to the vite build tool
+
+## wwveal
+
+Presentation tool made with wwact
+

package/dist/diff.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 변경점의 컴포넌트로 부터 기존트리와 상태를 비교하며 새로 가상돔 트리를 새로 만든다.
+ * (오리지널 가상돔으로 부터 유의미한 상태를 유지해야 하는 경우를 판별하여 새로운 트리를 만듬)
+ *
+ * 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;

package/dist/hook/mountCallback.d.ts

@@ -0,0 +1,3 @@
+import { WDom } from '../types';
+export declare const mountCallback: (effectAction: () => void) => void;
+export declare const runMountedQueueFromWDom: (newWDom: WDom) => void;

package/dist/hook/ref.d.ts

@@ -0,0 +1,3 @@
+export declare const ref: <T>(initValue: T) => {
+    value: T;
+};

package/dist/hook/unmount.d.ts

@@ -0,0 +1,3 @@
+import { WDom } from '../types';
+export declare const unmount: (effectAction: () => void) => void;
+export declare const runUnmountQueueFromWDom: (newWDom: WDom) => void;

package/dist/hook/updateCallback.d.ts

@@ -0,0 +1,2 @@
+export declare const updateCallback: (effectAction: () => (() => void) | void, dependencies?: () => any[]) => void;
+export declare const runUpdateCallback: () => void;

package/dist/hook/useUpdate.d.ts

@@ -0,0 +1,3 @@
+import { WDom } from '../types';
+export declare const useUpdated: (effectAction: () => (() => void) | void, dependencies?: () => any[]) => void;
+export declare const runUpdatedQueueFromWDom: (newWDom: WDom) => void;

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+import { h, Fragment, mount } from './wDom';
+import { render } from './render';
+import { mountCallback } from './hook/mountCallback';
+import { updateCallback } from './hook/updateCallback';
+import { ref } from './hook/ref';
+declare const ext: {
+    componentRef: import('./types').ComponentRef;
+    componentKeyRef: {
+        value: import('./types').Props;
+    };
+    dataStoreStore: {
+        [key: string]: import('./types').UseDataStoreValue;
+    };
+    dataStoreRenderQueue: {
+        [key: string]: (() => boolean)[];
+    };
+    checkFunction: (target: unknown) => target is Function;
+    getComponentKey: () => import('./types').Props;
+    componentRender: (componentKey: import('./types').Props) => () => boolean;
+};
+export type { WDom, TagFunction, TagFunctionResolver, FragmentFunction, ComponentSubKey, ComponentRef, Props, Renew, MiddleStateWDomChildren, MiddleStateWDom, UseDataStoreValue, NodePointer, Param, } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            [name: string]: any;
+        }
+    }
+}
+export { h, Fragment, render, mount, mountCallback, updateCallback, ref, ext };