lithent 1.8.0 → 1.9.1

package/README.md

@@ -1,6 +1,6 @@
 # ➿ lithent
 
-> An extensible virtual DOM library for lightweight use in a variety of environments.
+> An extensible JSX-based virtual DOM library for lightweight use in a variety of environments.
 
 - [Korean Guide Document](https://medium.com/@superlucky84/lithent-전체-기능-설명서-3cfab04c0722)
 - [Home Page](https://superlucky84.github.io/lithent) - (This page is written in lithent.)
@@ -18,9 +18,9 @@ used lightly in a variety of situations.
 - [How To Install](#how-to-install)
   - [Use NPM](#use-npm)
   - [Use CDN](#or-use-cdn)
-  - [With HTM](#with-htm)
   - [With JSX](#with-jsx)
   - [With FTAGS](#with-ftags)
+  - [With HTM](#with-htm)
 - [Examples](#examples)
   - [With ESM](#with-esm)
   - [With UMD](#with-umd)
@@ -66,57 +66,50 @@ pnpm add lithent
 
 #### Or Use CDN
 
-* UMD : https://cdn.jsdelivr.net/npm/lithent@1.8.0/dist/lithent.umd.js
-* UMD-HELPER: https://cdn.jsdelivr.net/npm/lithent@1.8.0/helper/dist/lithentHelper.umd.js
-* UMD-TAG: https://cdn.jsdelivr.net/npm/lithent@1.8.0/tag/dist/lithentTag.umd.js
-* ESM : https://cdn.jsdelivr.net/npm/lithent@1.8.0/dist/lithent.mjs
-* ESM-HELPER: https://cdn.jsdelivr.net/npm/lithent@1.8.0/helper/dist/lithentHelper.mjs
-* ESM-TAG: https://cdn.jsdelivr.net/npm/lithent@1.8.0/tag/dist/lithentTag.mjs
+* UMD : https://cdn.jsdelivr.net/npm/lithent@1.9.1/dist/lithent.umd.js
+* UMD-HELPER: https://cdn.jsdelivr.net/npm/lithent@1.9.1/helper/dist/lithentHelper.umd.js
+* UMD-FTAGS: https://cdn.jsdelivr.net/npm/lithent@1.9.1/ftags/dist/lithentFTags.umd.js
+* UMD-TAG: https://cdn.jsdelivr.net/npm/lithent@1.9.1/tag/dist/lithentTag.umd.js
+* ESM : https://cdn.jsdelivr.net/npm/lithent@1.9.1/dist/lithent.mjs
+* ESM-HELPER: https://cdn.jsdelivr.net/npm/lithent@1.9.1/helper/dist/lithentHelper.mjs
+* ESM-FTAGS: https://cdn.jsdelivr.net/npm/lithent@1.9.1/ftags/dist/lithentFTag.mjs
+* ESM-TAG: https://cdn.jsdelivr.net/npm/lithent@1.9.1/tag/dist/lithentTag.mjs
 
 
 It's easier to use lithent with JSX or HTM.
 
-#### With HTM
-
-- [Htm Github](https://github.com/developit/htm)
-
-```js
-import { lTag } from 'lithent/tag';
-const destroy = render(lTag`<${Component} />`, document.getElementById('root'), document.getElementById('#insert-before-this-element'));
-```
-
 #### With JSX
 
-- [Setting Guide](https://superlucky84.github.io/lithent/#install)
+* Lithent is built on top of JSX.
+  * [Setting Guide](https://superlucky84.github.io/lithent/#install)
 
 
 #### With FTAGS
 
-You can markup by calling a function.
-When creating components, use `fMount` instead of `mount`.
-When creating fragment, use `FFragment` instead of `Fragment`.
+You don't need to use h functions or JSX, you can call functions to mark them up.
+When creating a component, use `fMount` instead of `mount`.
+When creating a fragment, use `fFragment` instead of `Fragment`.
 
 ```ts
 import { render, h } from 'lithent';
-import { fTags, FFragment, fMount } from 'lithent/ftags';
+import { fTags, fFragment, fMount } from 'lithent/ftags';
 
 const { section, div, p, br, strong } = fTags;
 
-const FTagComponent = fMount<{ firstProp: number }>((_r, props, children) => {
+const fTagComponent = fMount<{ firstProp: number }>((_r, props, children) => {
   return () =>
-    FFragment(
-      {},
+    fFragment(
       'first inner',
-      div({ style: 'border: 1px solid red' }, 'second inner'),
+      div({ style: { border: '1px solid red' } }, 'second inner'),
       props.firstProp,
       ...children
     );
 });
 
 render(
-  FTagComponent(
+  fTagComponent(
     { firstProp: 3 },
-    div({ style: 'border: 1px solid green' }, `Fchildren1`),
+    div({ style: { border: '1px solid green' } }, `Fchildren1`),
     'Fchildren2',
     br()
   ),
@@ -124,6 +117,16 @@ render(
 );
 ```
 
+#### With HTM
+
+- [Htm Github](https://github.com/developit/htm)
+
+```js
+import { lTag } from 'lithent/tag';
+const destroy = render(lTag`<${Component} />`, document.getElementById('root'), document.getElementById('#insert-before-this-element'));
+```
+
+
 ## Examples
 
 - [More Examples](https://superlucky84.github.io/lithent/#examples)
@@ -158,10 +161,10 @@ const destroy = render(lTag`<${Component} />`, document.getElementById('root'),
 #### With UMD
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/lithent@1.8.0/dist/lithent.umd.js"></script>
-<!--script src="https://cdn.jsdelivr.net/npm/lithent@1.8.0/helper/dist/lithentHelper.umd.js"></script-->
-<script src="https://cdn.jsdelivr.net/npm/lithent@1.8.0/tag/dist/lithentTag.umd.js"></script>
-<!--script src="https://cdn.jsdelivr.net/npm/lithent@1.8.0/ftags/dist/lithentFTags.umd.js"></script-->
+<script src="https://cdn.jsdelivr.net/npm/lithent@1.9.1/dist/lithent.umd.js"></script>
+<!--script src="https://cdn.jsdelivr.net/npm/lithent@1.9.1/helper/dist/lithentHelper.umd.js"></script-->
+<script src="https://cdn.jsdelivr.net/npm/lithent@1.9.1/tag/dist/lithentTag.umd.js"></script>
+<!--script src="https://cdn.jsdelivr.net/npm/lithent@1.9.1/ftags/dist/lithentFTags.umd.js"></script-->
 
 <div id="root"></div>
 

package/ftags/dist/index.d.ts

@@ -14,6 +14,16 @@ export declare const FFragment: (props: Props, ...children: MiddleStateWDom[]) =
     children: WDom[];
     resolve: (compKey?: Props | undefined) => WDom;
 };
+export declare const fFragment: (...children: MiddleStateWDom[]) => WDom | {
+    type: string;
+    children: WDom[];
+} | {
+    tagName: string;
+    ctor: TagFunction;
+    props: Props;
+    children: WDom[];
+    resolve: (compKey?: Props | undefined) => WDom;
+};
 export declare const fMount: <T>(component: Component<T>) => (props?: T | undefined, ...children: MiddleStateWDom[]) => WDom | {
     type: string;
     children: WDom[];

package/ftags/dist/lithentFTags.mjs

@@ -2,17 +2,18 @@ import { h as e, Fragment as c } from "lithent";
 const g = new Proxy(
   {},
   {
-    get(n, t) {
-      return (r, ...o) => e(t, r || {}, ...o);
+    get(t, n) {
+      return (r, ...o) => e(n, r || {}, ...o);
     }
   }
-), u = (n, ...t) => e(c, n, ...t), a = (n) => {
-  const t = (r, o) => n;
-  return (r, ...o) => e(t, r || {}, o);
+), u = (t, ...n) => e(c, t, ...n), a = (...t) => e(c, {}, ...t), m = (t) => {
+  const n = (r, o) => t;
+  return (r, ...o) => e(n, r || {}, ...o);
 };
 export {
   u as FFragment,
-  a as fMount,
+  a as fFragment,
+  m as fMount,
   g as fTags
 };
 //# sourceMappingURL=lithentFTags.mjs.map

package/ftags/dist/lithentFTags.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lithentFTags.mjs","sources":["../src/index.ts"],"sourcesContent":["import { h, Fragment } from 'lithent';\nimport type {\n  Props,\n  WDom,\n  FragmentFunction,\n  MiddleStateWDom,\n  Component,\n  TagFunction,\n} from 'lithent';\n\ntype FFunction = (props?: Props, ...childrens: MiddleStateWDom[]) => WDom;\ntype FTags = {\n  [tagName: string]: FFunction;\n};\n\nexport const fTags: FTags = new Proxy(\n  {},\n  {\n    get(_: {}, tagName: string) {\n      return (props?: Props, ...childrens: MiddleStateWDom[]) =>\n        h(tagName, props || {}, ...childrens);\n    },\n  }\n);\n\nexport const FFragment = (props: Props, ...children: MiddleStateWDom[]) => {\n  return h(Fragment as FragmentFunction, props, ...children);\n};\n\nexport const fMount = <T>(component: Component<T>) => {\n  const tagFunction = (_props: T, _children: WDom[]) => component;\n\n  return (props?: T, ...children: MiddleStateWDom[]) =>\n    h(tagFunction as TagFunction, props || {}, children);\n};\n"],"names":["fTags","_","tagName","props","childrens","h","FFragment","children","Fragment","fMount","component","tagFunction","_props","_children"],"mappings":";AAeO,MAAMA,IAAe,IAAI;AAAA,EAC9B,CAAC;AAAA,EACD;AAAA,IACE,IAAIC,GAAOC,GAAiB;AACnB,aAAA,CAACC,MAAkBC,MACxBC,EAAEH,GAASC,KAAS,CAAA,GAAI,GAAGC,CAAS;AAAA,IACxC;AAAA,EACF;AACF,GAEaE,IAAY,CAACH,MAAiBI,MAClCF,EAAEG,GAA8BL,GAAO,GAAGI,CAAQ,GAG9CE,IAAS,CAAIC,MAA4B;AAC9C,QAAAC,IAAc,CAACC,GAAWC,MAAsBH;AAE/C,SAAA,CAACP,MAAcI,MACpBF,EAAEM,GAA4BR,KAAS,IAAII,CAAQ;AACvD;"}
+{"version":3,"file":"lithentFTags.mjs","sources":["../src/index.ts"],"sourcesContent":["import { h, Fragment } from 'lithent';\nimport type {\n  Props,\n  WDom,\n  FragmentFunction,\n  MiddleStateWDom,\n  Component,\n  TagFunction,\n} from 'lithent';\n\ntype FFunction = (props?: Props, ...childrens: MiddleStateWDom[]) => WDom;\ntype FTags = {\n  [tagName: string]: FFunction;\n};\n\nexport const fTags: FTags = new Proxy(\n  {},\n  {\n    get(_: {}, tagName: string) {\n      return (props?: Props, ...childrens: MiddleStateWDom[]) =>\n        h(tagName, props || {}, ...childrens);\n    },\n  }\n);\n\nexport const FFragment = (props: Props, ...children: MiddleStateWDom[]) => {\n  return h(Fragment as FragmentFunction, props, ...children);\n};\n\nexport const fFragment = (...children: MiddleStateWDom[]) => {\n  return h(Fragment as FragmentFunction, {}, ...children);\n};\n\nexport const fMount = <T>(component: Component<T>) => {\n  const tagFunction = (_props: T, _children: WDom[]) => component;\n\n  return (props?: T, ...children: MiddleStateWDom[]) =>\n    h(tagFunction as TagFunction, props || {}, ...children);\n};\n"],"names":["fTags","_","tagName","props","childrens","h","FFragment","children","Fragment","fFragment","fMount","component","tagFunction","_props","_children"],"mappings":";AAeO,MAAMA,IAAe,IAAI;AAAA,EAC9B,CAAC;AAAA,EACD;AAAA,IACE,IAAIC,GAAOC,GAAiB;AACnB,aAAA,CAACC,MAAkBC,MACxBC,EAAEH,GAASC,KAAS,CAAA,GAAI,GAAGC,CAAS;AAAA,IACxC;AAAA,EACF;AACF,GAEaE,IAAY,CAACH,MAAiBI,MAClCF,EAAEG,GAA8BL,GAAO,GAAGI,CAAQ,GAG9CE,IAAY,IAAIF,MACpBF,EAAEG,GAA8B,IAAI,GAAGD,CAAQ,GAG3CG,IAAS,CAAIC,MAA4B;AAC9C,QAAAC,IAAc,CAACC,GAAWC,MAAsBH;AAE/C,SAAA,CAACR,MAAcI,MACpBF,EAAEO,GAA4BT,KAAS,CAAA,GAAI,GAAGI,CAAQ;AAC1D;"}

package/ftags/dist/lithentFTags.umd.js

@@ -1,2 +1,2 @@
-(function(e,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("lithent")):typeof define=="function"&&define.amd?define(["exports","lithent"],n):(e=typeof globalThis<"u"?globalThis:e||self,n(e.lithentFTags={},e.lithent))})(this,function(e,n){"use strict";const r=new Proxy({},{get(o,t){return(i,...f)=>n.h(t,i||{},...f)}}),u=(o,...t)=>n.h(n.Fragment,o,...t),s=o=>{const t=(i,f)=>o;return(i,...f)=>n.h(t,i||{},f)};e.FFragment=u,e.fMount=s,e.fTags=r,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
+(function(e,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("lithent")):typeof define=="function"&&define.amd?define(["exports","lithent"],n):(e=typeof globalThis<"u"?globalThis:e||self,n(e.lithentFTags={},e.lithent))})(this,function(e,n){"use strict";const u=new Proxy({},{get(t,r){return(o,...f)=>n.h(r,o||{},...f)}}),i=(t,...r)=>n.h(n.Fragment,t,...r),s=(...t)=>n.h(n.Fragment,{},...t),d=t=>{const r=(o,f)=>t;return(o,...f)=>n.h(r,o||{},...f)};e.FFragment=i,e.fFragment=s,e.fMount=d,e.fTags=u,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
 //# sourceMappingURL=lithentFTags.umd.js.map

package/ftags/dist/lithentFTags.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"lithentFTags.umd.js","sources":["../src/index.ts"],"sourcesContent":["import { h, Fragment } from 'lithent';\nimport type {\n  Props,\n  WDom,\n  FragmentFunction,\n  MiddleStateWDom,\n  Component,\n  TagFunction,\n} from 'lithent';\n\ntype FFunction = (props?: Props, ...childrens: MiddleStateWDom[]) => WDom;\ntype FTags = {\n  [tagName: string]: FFunction;\n};\n\nexport const fTags: FTags = new Proxy(\n  {},\n  {\n    get(_: {}, tagName: string) {\n      return (props?: Props, ...childrens: MiddleStateWDom[]) =>\n        h(tagName, props || {}, ...childrens);\n    },\n  }\n);\n\nexport const FFragment = (props: Props, ...children: MiddleStateWDom[]) => {\n  return h(Fragment as FragmentFunction, props, ...children);\n};\n\nexport const fMount = <T>(component: Component<T>) => {\n  const tagFunction = (_props: T, _children: WDom[]) => component;\n\n  return (props?: T, ...children: MiddleStateWDom[]) =>\n    h(tagFunction as TagFunction, props || {}, children);\n};\n"],"names":["fTags","_","tagName","props","childrens","h","FFragment","children","Fragment","fMount","component","tagFunction","_props","_children"],"mappings":"6QAea,MAAAA,EAAe,IAAI,MAC9B,CAAC,EACD,CACE,IAAIC,EAAOC,EAAiB,CACnB,MAAA,CAACC,KAAkBC,IACxBC,EAAA,EAAEH,EAASC,GAAS,CAAA,EAAI,GAAGC,CAAS,CACxC,CACF,CACF,EAEaE,EAAY,CAACH,KAAiBI,IAClCF,EAAE,EAAAG,EAAA,SAA8BL,EAAO,GAAGI,CAAQ,EAG9CE,EAAaC,GAA4B,CAC9C,MAAAC,EAAc,CAACC,EAAWC,IAAsBH,EAE/C,MAAA,CAACP,KAAcI,IACpBF,EAAAA,EAAEM,EAA4BR,GAAS,GAAII,CAAQ,CACvD"}
+{"version":3,"file":"lithentFTags.umd.js","sources":["../src/index.ts"],"sourcesContent":["import { h, Fragment } from 'lithent';\nimport type {\n  Props,\n  WDom,\n  FragmentFunction,\n  MiddleStateWDom,\n  Component,\n  TagFunction,\n} from 'lithent';\n\ntype FFunction = (props?: Props, ...childrens: MiddleStateWDom[]) => WDom;\ntype FTags = {\n  [tagName: string]: FFunction;\n};\n\nexport const fTags: FTags = new Proxy(\n  {},\n  {\n    get(_: {}, tagName: string) {\n      return (props?: Props, ...childrens: MiddleStateWDom[]) =>\n        h(tagName, props || {}, ...childrens);\n    },\n  }\n);\n\nexport const FFragment = (props: Props, ...children: MiddleStateWDom[]) => {\n  return h(Fragment as FragmentFunction, props, ...children);\n};\n\nexport const fFragment = (...children: MiddleStateWDom[]) => {\n  return h(Fragment as FragmentFunction, {}, ...children);\n};\n\nexport const fMount = <T>(component: Component<T>) => {\n  const tagFunction = (_props: T, _children: WDom[]) => component;\n\n  return (props?: T, ...children: MiddleStateWDom[]) =>\n    h(tagFunction as TagFunction, props || {}, ...children);\n};\n"],"names":["fTags","_","tagName","props","childrens","h","FFragment","children","Fragment","fFragment","fMount","component","tagFunction","_props","_children"],"mappings":"6QAea,MAAAA,EAAe,IAAI,MAC9B,CAAC,EACD,CACE,IAAIC,EAAOC,EAAiB,CACnB,MAAA,CAACC,KAAkBC,IACxBC,EAAA,EAAEH,EAASC,GAAS,CAAA,EAAI,GAAGC,CAAS,CACxC,CACF,CACF,EAEaE,EAAY,CAACH,KAAiBI,IAClCF,EAAE,EAAAG,EAAA,SAA8BL,EAAO,GAAGI,CAAQ,EAG9CE,EAAY,IAAIF,IACpBF,EAAE,EAAAG,EAAA,SAA8B,GAAI,GAAGD,CAAQ,EAG3CG,EAAaC,GAA4B,CAC9C,MAAAC,EAAc,CAACC,EAAWC,IAAsBH,EAE/C,MAAA,CAACR,KAAcI,IACpBF,EAAA,EAAEO,EAA4BT,GAAS,CAAA,EAAI,GAAGI,CAAQ,CAC1D"}

package/ftags/src/index.ts

@@ -27,9 +27,13 @@ export const FFragment = (props: Props, ...children: MiddleStateWDom[]) => {
   return h(Fragment as FragmentFunction, props, ...children);
 };
 
+export const fFragment = (...children: MiddleStateWDom[]) => {
+  return h(Fragment as FragmentFunction, {}, ...children);
+};
+
 export const fMount = <T>(component: Component<T>) => {
   const tagFunction = (_props: T, _children: WDom[]) => component;
 
   return (props?: T, ...children: MiddleStateWDom[]) =>
-    h(tagFunction as TagFunction, props || {}, children);
+    h(tagFunction as TagFunction, props || {}, ...children);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lithent",
-  "version": "1.8.0",
+  "version": "1.9.1",
   "description": "An extensible virtual DOM library for lightweight use in a variety of environments.",
   "packageManager": "pnpm@7.6.0",
   "main": "./dist/lithent.umd.js",

package/src/tests/ftag.tsx

@@ -28,30 +28,29 @@ const fMount = <T,>(component: Component<T>) => {
   const tagFunction = (_props: T, _children: WDom[]) => component;
 
   return (props?: T, ...children: MiddleStateWDom[]) =>
-    h(tagFunction as TagFunction, props || {}, children);
+    h(tagFunction as TagFunction, props || {}, ...children);
 };
 
-const FFragment = (props: Props, ...children: MiddleStateWDom[]) => {
-  return h(Fragment as FragmentFunction, props, ...children);
+const fFragment = (...children: MiddleStateWDom[]) => {
+  return h(Fragment as FragmentFunction, {}, ...children);
 };
 
 const { section, div, p, br, strong } = fTags;
 
-const FTagComponent = fMount<{ a: number }>((_r, props, children) => {
+const fTagComponent = fMount<{ a: number }>((_r, props, children) => {
   return () =>
-    FFragment(
-      {},
+    fFragment(
       'first inner',
-      div({ style: 'border: 1px solid red' }, 'second inner'),
+      div({ style: { border: '1px solid red' } }, 'second inner'),
       props.a,
       ...children
     );
 });
 
 render(
-  FTagComponent(
+  fTagComponent(
     { a: 3 },
-    div({ style: 'border: 1px solid green' }, `Fchildren1`),
+    div({ style: { border: '1px solid green' } }, `Fchildren1`),
     'Fchildren2',
     br(),
     section(