@gem-sdk/system 1.58.0-dev.139 → 1.58.0-dev.140

package/dist/cjs/component/template.js

@@ -0,0 +1,89 @@
+'use strict';
+
+/*
+
+Liquid in liquid.ts
+<div>
+Liquid(`
+  {%-if productSelectedVariant == empty or productSelectedVariant == null -%}
+    {%- assign productSelectedVariant = product.selected_or_first_available_variant -%}
+  {%- endif -%}
+  {%-if variant == empty or variant == null -%}
+    {%- assign variant = product.selected_or_first_available_variant -%}
+  {%- endif -%}
+`)
+</div>
+
+IF in tsx & liquid.ts
+<div {...attrs}>
+  {
+    If(product.id != "", (
+      <label className={classes} style={styles}>
+        {content}
+      </label>
+    ), (
+      <label className={classes} style={styles}>
+        {content}
+      </label>
+    ))
+  }
+</div>
+
+LiquidIF in liquid.ts
+<div {...attrs}>
+  {
+    LiquidIf("product.quanity > 0", `
+      <label className={classes} style={styles}>
+        {content}
+      </label>
+    `, `
+      <label className={classes} style={styles}>
+        {content}
+      </label>
+    `)
+  }
+</div>
+
+For in tsx & liquid.ts
+{
+  For(numbers, (item, index) => (
+    <div key={index}>
+      {index + 1}: Số {item}
+    </div>
+  ))
+}
+
+LiquidFor in tsx & liquid.ts
+{
+  LiquidFor('(item, index) in items', `
+    <div key="{{ forloop.index }}">
+      {{ forloop.index + 1}}: Số {{item}}
+    </div>
+  `)
+}
+
+*/ const Liquid = (code)=>{
+    return code;
+};
+const For = (items, renderFn)=>{
+    return items.map((item, index)=>renderFn(item, index));
+};
+const LiquidFor = (c, t)=>{
+    return `{% for ${c} %}${typeof t === 'string' ? t : t()}{% endfor %}`;
+};
+const If = (condition, trueResult, falseResult)=>{
+    if (condition) {
+        // Trả về kết quả đúng nếu điều kiện là true
+        return typeof trueResult === 'function' ? trueResult() : trueResult;
+    } else {
+        // Trả về kết quả sai nếu điều kiện là false
+        return falseResult ? typeof falseResult === 'function' ? falseResult() : falseResult : null; // Nếu không có falseResult, trả về null
+    }
+};
+const LiquidIf = (c, t, f)=>`{% if ${c} %}${typeof t === 'string' ? t : t()}${f ? `{% else %}${typeof f === 'string' ? f : f?.()}` : ''}{% endif %}`;
+
+exports.For = For;
+exports.If = If;
+exports.Liquid = Liquid;
+exports.LiquidFor = LiquidFor;
+exports.LiquidIf = LiquidIf;

package/dist/cjs/index.js

@@ -5,6 +5,7 @@ var createStyle = require('./component/createStyle.js');
 var createContent = require('./component/createContent.js');
 var createClass = require('./component/createClass.js');
 var createStateOrContext = require('./component/createStateOrContext.js');
+var template = require('./component/template.js');
 
 const createAttrReact = createAttr.createAttr;
 const createContentReact = createContent.createContent;
@@ -16,6 +17,11 @@ exports.createStyleReact = createStyle.createStyleReact;
 exports.createContent = createContent.createContent;
 exports.createClass = createClass.createClass;
 exports.createStateOrContext = createStateOrContext.createStateOrContext;
+exports.For = template.For;
+exports.If = template.If;
+exports.Liquid = template.Liquid;
+exports.LiquidFor = template.LiquidFor;
+exports.LiquidIf = template.LiquidIf;
 exports.createAttrReact = createAttrReact;
 exports.createClassReact = createClassReact;
 exports.createContentReact = createContentReact;

package/dist/esm/component/template.js

@@ -0,0 +1,83 @@
+/*
+
+Liquid in liquid.ts
+<div>
+Liquid(`
+  {%-if productSelectedVariant == empty or productSelectedVariant == null -%}
+    {%- assign productSelectedVariant = product.selected_or_first_available_variant -%}
+  {%- endif -%}
+  {%-if variant == empty or variant == null -%}
+    {%- assign variant = product.selected_or_first_available_variant -%}
+  {%- endif -%}
+`)
+</div>
+
+IF in tsx & liquid.ts
+<div {...attrs}>
+  {
+    If(product.id != "", (
+      <label className={classes} style={styles}>
+        {content}
+      </label>
+    ), (
+      <label className={classes} style={styles}>
+        {content}
+      </label>
+    ))
+  }
+</div>
+
+LiquidIF in liquid.ts
+<div {...attrs}>
+  {
+    LiquidIf("product.quanity > 0", `
+      <label className={classes} style={styles}>
+        {content}
+      </label>
+    `, `
+      <label className={classes} style={styles}>
+        {content}
+      </label>
+    `)
+  }
+</div>
+
+For in tsx & liquid.ts
+{
+  For(numbers, (item, index) => (
+    <div key={index}>
+      {index + 1}: Số {item}
+    </div>
+  ))
+}
+
+LiquidFor in tsx & liquid.ts
+{
+  LiquidFor('(item, index) in items', `
+    <div key="{{ forloop.index }}">
+      {{ forloop.index + 1}}: Số {{item}}
+    </div>
+  `)
+}
+
+*/ const Liquid = (code)=>{
+    return code;
+};
+const For = (items, renderFn)=>{
+    return items.map((item, index)=>renderFn(item, index));
+};
+const LiquidFor = (c, t)=>{
+    return `{% for ${c} %}${typeof t === 'string' ? t : t()}{% endfor %}`;
+};
+const If = (condition, trueResult, falseResult)=>{
+    if (condition) {
+        // Trả về kết quả đúng nếu điều kiện là true
+        return typeof trueResult === 'function' ? trueResult() : trueResult;
+    } else {
+        // Trả về kết quả sai nếu điều kiện là false
+        return falseResult ? typeof falseResult === 'function' ? falseResult() : falseResult : null; // Nếu không có falseResult, trả về null
+    }
+};
+const LiquidIf = (c, t, f)=>`{% if ${c} %}${typeof t === 'string' ? t : t()}${f ? `{% else %}${typeof f === 'string' ? f : f?.()}` : ''}{% endif %}`;
+
+export { For, If, Liquid, LiquidFor, LiquidIf };

package/dist/esm/index.js

@@ -3,6 +3,7 @@ export { createStyle, createStyleReact } from './component/createStyle.js';
 import { createContent } from './component/createContent.js';
 import { createClass } from './component/createClass.js';
 export { createStateOrContext } from './component/createStateOrContext.js';
+export { For, If, Liquid, LiquidFor, LiquidIf } from './component/template.js';
 
 const createAttrReact = createAttr;
 const createContentReact = createContent;

package/dist/types/index.d.ts

@@ -27,6 +27,13 @@ declare const createStateOrContext: (obj: {
     [key: string]: any;
 };
 
+type CallbackCondition = () => JSX.Element | string;
+declare const Liquid: (code: string) => string;
+declare const For: <T>(items: T[], renderFn: (item: T, index: number) => JSX.Element) => JSX.Element[];
+declare const LiquidFor: (c: string, t: string | CallbackCondition) => string;
+declare const If: (condition: boolean | null | undefined, trueResult: string | JSX.Element | CallbackCondition, falseResult?: string | JSX.Element | CallbackCondition) => JSX.Element | string | null;
+declare const LiquidIf: (c: string, t: string | CallbackCondition, f?: string | CallbackCondition) => string;
+
 declare const createAttrReact: (obj: {
     [key: string]: string | number;
 }) => {
@@ -39,4 +46,4 @@ declare const createClassReact: (obj: {
     [key: string]: boolean | undefined;
 }) => string;
 
-export { createAttr, createAttrReact, createClass, createClassReact, createContent, createContentReact, createStateOrContext, createStyle, createStyleReact };
+export { For, If, Liquid, LiquidFor, LiquidIf, createAttr, createAttrReact, createClass, createClassReact, createContent, createContentReact, createStateOrContext, createStyle, createStyleReact };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/system",
-  "version": "1.58.0-dev.139",
+  "version": "1.58.0-dev.140",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",