lithent 1.18.4 → 1.19.1

package/README.md

@@ -38,6 +38,8 @@ used lightly in a variety of situations.
 - [Examples](#examples)
   - [With ESM](#with-esm)
   - [With UMD](#with-umd)
+- [Context API](#context-api)
+  - [Multi-value Provider Example](#multi-value-provider-example)
 - [Related Projects](#related-projects)
 - [Develop Guide](#develop-guide)
 - [Test](#test)
@@ -90,14 +92,14 @@ pnpm add lithent
 
 #### Or Use CDN
 
-* UMD : https://cdn.jsdelivr.net/npm/lithent@1.18.4/dist/lithent.umd.js
-* UMD-HELPER: https://cdn.jsdelivr.net/npm/lithent@1.18.4/helper/dist/lithentHelper.umd.js
-* UMD-FTAGS: https://cdn.jsdelivr.net/npm/lithent@1.18.4/ftags/dist/lithentFTags.umd.js
-* UMD-TAG: https://cdn.jsdelivr.net/npm/lithent@1.18.4/tag/dist/lithentTag.umd.js
-* ESM : https://cdn.jsdelivr.net/npm/lithent@1.18.4/dist/lithent.mjs
-* ESM-HELPER: https://cdn.jsdelivr.net/npm/lithent@1.18.4/helper/dist/lithentHelper.mjs
-* ESM-FTAGS: https://cdn.jsdelivr.net/npm/lithent@1.18.4/ftags/dist/lithentFTags.mjs
-* ESM-TAG: https://cdn.jsdelivr.net/npm/lithent@1.18.4/tag/dist/lithentTag.mjs
+* UMD : https://cdn.jsdelivr.net/npm/lithent@1.19.1/dist/lithent.umd.js
+* UMD-HELPER: https://cdn.jsdelivr.net/npm/lithent@1.19.1/helper/dist/lithentHelper.umd.js
+* UMD-FTAGS: https://cdn.jsdelivr.net/npm/lithent@1.19.1/ftags/dist/lithentFTags.umd.js
+* UMD-TAG: https://cdn.jsdelivr.net/npm/lithent@1.19.1/tag/dist/lithentTag.umd.js
+* ESM : https://cdn.jsdelivr.net/npm/lithent@1.19.1/dist/lithent.mjs
+* ESM-HELPER: https://cdn.jsdelivr.net/npm/lithent@1.19.1/helper/dist/lithentHelper.mjs
+* ESM-FTAGS: https://cdn.jsdelivr.net/npm/lithent@1.19.1/ftags/dist/lithentFTags.mjs
+* ESM-TAG: https://cdn.jsdelivr.net/npm/lithent@1.19.1/tag/dist/lithentTag.mjs
 
 
 It's easier to use lithent with JSX or HTM.
@@ -122,9 +124,9 @@ import { fTags, fFragment, fMount } from 'lithent/ftags';
 const { section, div, p, br, strong } = fTags;
 
 /* UMD
-<script src="https://cdn.jsdelivr.net/npm/lithent@1.18.4/dist/lithent.umd.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/lithent@1.18.4/helper/dist/lithentHelper.umd.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/lithent@1.18.4/ftags/dist/lithentFTags.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/lithent@1.19.1/dist/lithent.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/lithent@1.19.1/helper/dist/lithentHelper.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/lithent@1.19.1/ftags/dist/lithentFTags.umd.js"></script>
 
 const { render } = lithent;
 const { fTags, fMount, fFragment } = lithentFTags;
@@ -197,10 +199,10 @@ const destroy = render(lTag`<${Component} />`, document.getElementById('root'),
 #### With UMD
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/lithent@1.18.4/dist/lithent.umd.js"></script>
-<!--script src="https://cdn.jsdelivr.net/npm/lithent@1.18.4/helper/dist/lithentHelper.umd.js"></script-->
-<script src="https://cdn.jsdelivr.net/npm/lithent@1.18.4/tag/dist/lithentTag.umd.js"></script>
-<!--script src="https://cdn.jsdelivr.net/npm/lithent@1.18.4/ftags/dist/lithentFTags.umd.js"></script-->
+<script src="https://cdn.jsdelivr.net/npm/lithent@1.19.1/dist/lithent.umd.js"></script>
+<!--script src="https://cdn.jsdelivr.net/npm/lithent@1.19.1/helper/dist/lithentHelper.umd.js"></script-->
+<script src="https://cdn.jsdelivr.net/npm/lithent@1.19.1/tag/dist/lithentTag.umd.js"></script>
+<!--script src="https://cdn.jsdelivr.net/npm/lithent@1.19.1/ftags/dist/lithentFTags.umd.js"></script-->
 
 <div id="root"></div>
 
@@ -232,6 +234,68 @@ const destroy = render(lTag`<${Component} />`, document.getElementById('root'),
 </script>
 ```
 
+## Context API
+
+Lithent-helper ships a lightweight context system so you can share state without manual prop drilling. Providers stay isolated from consumer renews and you can subscribe to every key or only the slices you need.
+
+### Multi-value Provider Example
+
+```tsx
+import { h, mount } from 'lithent';
+import { createContext } from 'lithent-helper';
+
+type AppState = { user: string; theme: string; count: number };
+
+const AppContext = createContext<AppState>();
+const { Provider, contextState, useContext } = AppContext;
+
+const AppProvider = mount((_renew, _props, children) => {
+  // Provider owns the shared state; consumers cannot trigger its renew directly.
+  const user = contextState('Alice');
+  const theme = contextState('dark');
+  const count = contextState(0);
+
+  return () => (
+    <Provider user={user} theme={theme} count={count}>
+      {children}
+    </Provider>
+  );
+});
+
+const StatsPanel = mount(renew => {
+  // Omitting the subscribe list subscribes to every value exposed by the Provider.
+  const ctx = useContext(AppContext, renew);
+  return () => (
+    <section>
+      <p>User: {ctx.user?.value}</p>
+      <p>Theme: {ctx.theme?.value}</p>
+      <p>Count: {ctx.count?.value}</p>
+      <button onClick={() => ctx.count && (ctx.count.value += 1)}>
+        Increment
+      </button>
+      <button onClick={() => ctx.count && (ctx.count.value = 3)}>
+        Set count to 3
+      </button>
+    </section>
+  );
+});
+
+const ThemeBadge = mount(renew => {
+  // Subscribe only to the theme key; user/count updates will not rerender this component.
+  const ctx = useContext(AppContext, renew, ['theme']);
+  return () => <span>Theme: {ctx.theme?.value}</span>;
+});
+
+const App = mount(() => {
+  return () => (
+    <AppProvider>
+      <StatsPanel />
+      <ThemeBadge />
+    </AppProvider>
+  );
+});
+```
+
 ## Related Projects
 - [htm](https://www.npmjs.com/package/htm) - making **H**yperscript **T**agged **M**arkup possible
 
@@ -276,4 +340,3 @@ pnpm install
 pnpm build
 pnpm test
 ```
-

package/dist/hook/{unmount.d.ts → internal/unmount.d.ts}

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

package/dist/hook/{useUpdate.d.ts → internal/useUpdate.d.ts}

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

package/dist/hook/mountCallback.d.ts

@@ -1,5 +1,13 @@
 import { WDom } from '../types';
-export declare const execMountedQueue: () => void;
+/**
+ * WDom을 mountedQueue에 추가
+ */
 export declare const addMountedQueue: (wDom: WDom) => void;
-export declare const mountCallback: (effectAction: () => void) => number;
-export declare const runMountedQueueFromWDom: (newWDom: WDom) => void;
+/**
+ * DOM 렌더링 후 mountCallback 실행
+ */
+export declare const execMountedQueue: () => void;
+/**
+ * mountCallback 등록
+ */
+export declare const mountCallback: (effectAction: () => void) => void;

package/dist/hook/mountReadyCallback.d.ts

@@ -0,0 +1,10 @@
+import { WDom } from '../types';
+/**
+ * WDom이 생성된 직후(DOM 마운트 전)에 실행될 콜백 등록
+ */
+export declare const mountReadyCallback: (effectAction: () => void | (() => void)) => void;
+/**
+ * 특정 WDom의 wdomCallback 즉시 실행
+ * wDomToDom() 내부에서 각 WDom 생성 시점에 호출됨
+ */
+export declare const runWDomCallbacksFromWDom: (newWDom: WDom) => void;

package/dist/index.d.ts

@@ -1,12 +1,13 @@
-export { h, Fragment, portal, mount } from './wDom';
+export { h, Fragment, portal, mount, replaceWDom } from './wDom';
 export { isPropType } from './utils';
 export { componentUpdate } from './utils/redraw';
-export { componentMap } from './utils/universalRef';
+export { getComponentKey, componentMap, getComponentSubInfo, } from './utils/universalRef';
 export { render } from './render';
 export { mountCallback } from './hook/mountCallback';
+export { mountReadyCallback } from './hook/mountReadyCallback';
 export { updateCallback } from './hook/updateCallback';
 export { ref, nextTick } from './hook/ref';
-export type { WDom, TagFunction, TagFunctionResolver, FragmentFunction, Component, ComponentSubKey, ComponentMap, Props, Renew, MiddleStateWDomChildren, MiddleStateWDom, NodePointer, Param, } from './types';
+export type { WDom, TagFunction, TagFunctionResolver, FragmentFunction, Component, ComponentSubKey, ComponentMap, ComponentInfo, CompKey, Props, Renew, MiddleStateWDomChildren, MiddleStateWDom, NodePointer, Param, } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {