@gem-sdk/system 1.58.0-dev.143 → 1.58.0-dev.145

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,12 +1,11 @@
 {
   "name": "@gem-sdk/system",
-  "version": "1.58.0-dev.143",
+  "version": "1.58.0-dev.145",
   "license": "MIT",
   "sideEffects": false,
-  "main": "src/index.ts",
+  "main": "dist/cjs/index.js",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "scripts": {
     "cleanup": "rimraf es dist lib",
@@ -21,7 +20,17 @@
     "type-check": "yarn tsc --noEmit"
   },
   "dependencies": {
-    "@gem-sdk/core": "1.58.0-dev.135"
+    "@gem-sdk/core": "1.58.0-dev.145"
   },
-  "devDependencies": {}
+  "devDependencies": {},
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/types/index.d.ts"
+    }
+  }
 }

package/src/component/__tests__/ template.test.tsx

@@ -1,76 +0,0 @@
-import { describe, test, expect, jest } from '@jest/globals';
-import { For, If, Liquid, LiquidFor, LiquidIf, Unless, LiquidUnless } from '../template';
-
-// Mock callback
-const mockCallback = jest.fn(() => '<div>Mock Element</div>');
-
-describe('Testing utility functions', () => {
-  test('Liquid should return the input string', () => {
-    const input = "Hello, World!";
-    const result = Liquid(input);
-    expect(result).toBe(input);
-  });
- 
-  test('For should render a list of JSX elements', () => {
-    const items = [1, 2, 3];
-    const renderFn = (item: number) => <div key={item}>Item {item}</div>;
-    const result = For(items, renderFn);
-    expect(result).toHaveLength(3);
-    expect(result[0]).toEqual(<div key={items[0]}>Item {items[0]}</div>);
-  });
-
-  test('LiquidFor should render a Liquid template', () => {
-    const code = "item in items";
-    const template = "Content";
-    const result = LiquidFor(code, template);
-    expect(result).toBe(`{% for ${code} %}${template}{% endfor %}`);
-  });
-
-  test('If should return trueResult when condition is true', () => {
-    const result = If(true, "Yes", "No");
-    expect(result).toBe("Yes");
-  });
-
-  test('If should return falseResult when condition is false', () => {
-    const result = If(false, "Yes", "No");
-    expect(result).toBe("No");
-  });
-
-  test('If should handle JSX.Element', () => {
-    const result = If(true, <div>True</div>, <div>False</div>);
-    expect(result).toEqual(<div>True</div>);
-  });
-
-  test('LiquidIf should render a correct Liquid if-else template', () => {
-    const condition = "x > 10";
-    const trueResult = "Greater";
-    const falseResult = "Smaller";
-    const result = LiquidIf(condition, trueResult, falseResult);
-    expect(result).toBe(`{% if ${condition} %}${trueResult}{% else %}${falseResult}{% endif %}`);
-  });
-
-  test('Unless should reverse the condition', () => {
-    const result = Unless(false, "True", "False");
-    expect(result).toBe("True");
-  });
-
-  test('LiquidUnless should render a correct Liquid unless-else template', () => {
-    const condition = "x > 10";
-    const trueResult = "Greater";
-    const falseResult = "Smaller";
-    const result = LiquidUnless(condition, trueResult, falseResult);
-    expect(result).toBe(`{% unless ${condition} %}${trueResult}{% else %}${falseResult}{% endunless %}`);
-  });
-
-  test('If should handle callback conditions', () => {
-    const trueResult = mockCallback;
-    If(true, trueResult);
-    expect(mockCallback).toHaveBeenCalledTimes(1);
-  });
-
-  test('LiquidIf should handle callback conditions', () => {
-    const condition = "x > 10";
-    LiquidIf(condition, mockCallback);
-    expect(mockCallback).toHaveBeenCalledTimes(2); // Call count should include other tests
-  });
-});

package/src/component/__tests__/createAttr.test.ts

@@ -1,62 +0,0 @@
-import { describe, test, expect, beforeEach, jest } from '@jest/globals';
-import { createAttr } from '../createAttr';
-
-// Mock console.error to capture error messages
-global.console.error = jest.fn();
-
-describe('createAttr', () => {
-  beforeEach(() => {
-    // Clear the console.error mock before each test
-    (console.error as jest.Mock).mockClear();
-  });
-
-  test('should log error for key without "data-gp-" prefix', () => {
-    createAttr({ invalidKey: 'some value' });
-    expect(console.error).toHaveBeenCalledWith(
-      'Invalid attribute key: "invalidKey". Must start with "data-gp-".',
-    );
-  });
-
-  test('should log error for key with uppercase letters', () => {
-    createAttr({ 'data-gp-UppercaseKey': 'some value' });
-    expect(console.error).toHaveBeenCalledWith(
-      'Invalid attribute key: "data-gp-UppercaseKey". Must not contain uppercase letters.',
-    );
-  });
-
-  test('should log error for nested object', () => {
-    createAttr({ 'data-gp-nested': { fontSize: '12px' } } as any);
-    expect(console.error).toHaveBeenCalledWith(
-      'Invalid nested attribute for key "data-gp-nested". Nested objects are not supported.',
-    );
-  });
-
-  test('should log error for invalid value type', () => {
-    createAttr({ 'data-gp-invalidType': true as any });
-    expect(console.error).toHaveBeenCalledWith(
-      'Invalid attribute value for key "data-gp-invalidType": true. Must be a string or number.',
-    );
-  });
-
-  test('should handle multiple errors in one call', () => {
-    createAttr({
-      invalidKey: 'some value', // Invalid prefix
-      'data-gp-UppercaseKey': 'some value', // Uppercase in key
-      'data-gp-nested': { fontSize: '12px' }, // Nested object
-      'data-gp-invalidType': true as any, // Invalid value type
-    } as any);
-
-    expect(console.error).toHaveBeenCalledWith(
-      'Invalid attribute key: "invalidKey". Must start with "data-gp-".',
-    );
-    expect(console.error).toHaveBeenCalledWith(
-      'Invalid attribute key: "data-gp-UppercaseKey". Must not contain uppercase letters.',
-    );
-    expect(console.error).toHaveBeenCalledWith(
-      'Invalid nested attribute for key "data-gp-nested". Nested objects are not supported.',
-    );
-    expect(console.error).toHaveBeenCalledWith(
-      'Invalid attribute value for key "data-gp-invalidType": true. Must be a string or number.',
-    );
-  });
-});

package/src/component/__tests__/createClass.test.ts

@@ -1,68 +0,0 @@
-import { describe, test, expect, beforeAll, afterEach, jest } from '@jest/globals';
-
-// Import the function
-import { createClass } from '../createClass';
-
-// Declare console.error as a Jest mock
-beforeAll(() => {
-  global.console.error = jest.fn();
-});
-
-afterEach(() => {
-  // Clear the console.error mock after each test
-  (console.error as jest.Mock).mockClear();
-});
-
-describe('createClass', () => {
-  test('should return empty string and log error for invalid input', () => {
-    expect(createClass(null as any)).toBe('');
-    expect(console.error).toHaveBeenCalledWith('Expected an object as input.');
-
-    expect(createClass(123 as any)).toBe('');
-    expect(console.error).toHaveBeenCalledWith('Expected an object as input.');
-  });
-
-  test('should log an error for class names exceeding 30 characters', () => {
-    createClass({ averyverylongclassnameexceeding30characters: true });
-    expect(console.error).toHaveBeenCalledWith(
-      'Class name "averyverylongclassnameexceeding30characters" exceeds the maximum length of 30 characters.',
-    );
-  });
-
-  test('should log an error for class names with spaces', () => {
-    createClass({ 'class with space': true });
-    expect(console.error).toHaveBeenCalledWith(
-      'Class name "class with space" should not contain spaces.',
-    );
-  });
-
-  test('should log an error for class names with uppercase letters', () => {
-    createClass({ ClassWithUpperCase: true });
-    expect(console.error).toHaveBeenCalledWith(
-      'Class name "ClassWithUpperCase" should be in lowercase.',
-    );
-  });
-
-  test('should not log any errors for valid class names', () => {
-    createClass({ validclassname: true, anotherclass: true });
-    expect(console.error).not.toHaveBeenCalled();
-  });
-
-  test('should handle multiple errors in one call', () => {
-    createClass({
-      ValidClassWithUpper: true,
-      'class with space': true,
-      averyverylongclassnameexceeding30characters: true,
-    });
-
-    expect(console.error).toHaveBeenCalledWith(
-      'Class name "ValidClassWithUpper" should be in lowercase.',
-    );
-    expect(console.error).toHaveBeenCalledWith(
-      'Class name "class with space" should not contain spaces.',
-    );
-    expect(console.error).toHaveBeenCalledWith(
-      'Class name "averyverylongclassnameexceeding30characters" exceeds the maximum length of 30 characters.',
-    );
-  });
-});

package/src/component/__tests__/createContent.test.ts

@@ -1,52 +0,0 @@
-import { describe, test, expect, beforeEach, jest } from '@jest/globals';
-
-import { createContent } from '../createContent';
-
-// Mock console.error to capture error messages
-global.console.error = jest.fn();
-
-describe('createContent', () => {
-  beforeEach(() => {
-    // Clear the console.error mock before each test
-    (console.error as jest.Mock).mockClear();
-  });
-
-  test('should return empty string and log error if content is not a string', () => {
-    expect(createContent(12345 as any)).toBe('');
-    expect(console.error).toHaveBeenCalledWith('Invalid content type: Content must be a string.');
-
-    expect(createContent({} as any)).toBe('');
-    expect(console.error).toHaveBeenCalledWith('Invalid content type: Content must be a string.');
-  });
-
-  test('should return empty string and log error for content with invalid {{}} pattern', () => {
-    expect(createContent('{{Hello}} there')).toBe('');
-    expect(console.error).toHaveBeenCalledWith(
-      'Invalid content format: "{{}}" placeholders must not contain only letters, e.g., "{{Hello}}".',
-    );
-
-    expect(createContent('Welcome {{World}}')).toBe('');
-    expect(console.error).toHaveBeenCalledWith(
-      'Invalid content format: "{{}}" placeholders must not contain only letters, e.g., "{{Hello}}".',
-    );
-  });
-
-  test('should return valid content without errors', () => {
-    expect(createContent('This is valid content')).toBe('This is valid content');
-    expect(console.error).not.toHaveBeenCalled();
-
-    expect(createContent('Content with {{123}} is valid')).toBe('Content with {{123}} is valid');
-    expect(console.error).not.toHaveBeenCalled();
-
-    expect(createContent('Mix of {{valid1}} and {{valid2}}')).toBe(
-      'Mix of {{valid1}} and {{valid2}}',
-    );
-    expect(console.error).not.toHaveBeenCalled();
-  });
-
-  test('should pass with valid {{}} pattern containing more than just letters', () => {
-    const content = '{{ product.title | t }}';
-    expect(createContent(content)).toBe(content);
-    expect(console.error).not.toHaveBeenCalled();
-  });
-});

package/src/component/__tests__/createStateOrContext.test.ts

@@ -1,129 +0,0 @@
-import { describe, test, expect, beforeEach, jest } from '@jest/globals';
-
-import { createStateOrContext } from '../createStateOrContext';
-
-// Mock console.error to capture error messages
-global.console.error = jest.fn();
-
-describe('createStateOrContext', () => {
-  beforeEach(() => {
-    // Clear the console.error mock before each test
-    (console.error as jest.Mock).mockClear();
-  });
-
-  test('should log error for key length exceeding 20 characters', () => {
-    createStateOrContext({ thisKeyIsWayTooLongForOurRequirements: 'value' });
-    expect(console.error).toHaveBeenCalledWith(
-      'Invalid key "thisKeyIsWayTooLongForOurRequirements": Key length must not exceed 20 characters.',
-    );
-  });
-
-  test('should log error for key containing special characters', () => {
-    createStateOrContext({ invalid_key: 'value' });
-    expect(console.error).toHaveBeenCalledWith(
-      'Invalid key "invalid_key": Key must contain only alphabetic characters (no numbers or special characters).',
-    );
-  });
-
-  test('should log error for key containing numbers', () => {
-    createStateOrContext({ invalidKey1: 'value' });
-    expect(console.error).toHaveBeenCalledWith(
-      'Invalid key "invalidKey1": Key must contain only alphabetic characters (no numbers or special characters).',
-    );
-  });
-
-  test('should log error for key not in camelCase format', () => {
-    createStateOrContext({ Invalidkey: 'value' });
-    expect(console.error).toHaveBeenCalledWith(
-      'Invalid key "Invalidkey": Key must be in camelCase format.',
-    );
-  });
-
-  test('should log error for nested object deeper than 3 levels', () => {
-    createStateOrContext({
-      levelOne: {
-        levelTwo: {
-          levelThree: {
-            tooDeepKey: 'too deep',
-          },
-        },
-      },
-    });
-    expect(console.error).toHaveBeenCalledWith(
-      'Invalid structure: Data must not be nested deeper than 3 levels.',
-    );
-  });
-
-  test('should log error for invalid values (undefined, null, blank, false)', () => {
-    createStateOrContext({
-      validKey: 'value', // Valid
-      undefinedKey: undefined, // Invalid
-      nullKey: null, // Invalid
-      emptyStringKey: '', // Invalid
-      falseKey: false, // Invalid
-    });
-
-    expect(console.error).toHaveBeenCalledWith(
-      'Invalid value for key "undefinedKey": Value must not be undefined, null, blank, or false.',
-    );
-    expect(console.error).toHaveBeenCalledWith(
-      'Invalid value for key "nullKey": Value must not be undefined, null, blank, or false.',
-    );
-    expect(console.error).toHaveBeenCalledWith(
-      'Invalid value for key "emptyStringKey": Value must not be undefined, null, blank, or false.',
-    );
-    expect(console.error).toHaveBeenCalledWith(
-      'Invalid value for key "falseKey": Value must not be undefined, null, blank, or false.',
-    );
-  });
-
-  test('should not log any errors for valid keys and values', () => {
-    createStateOrContext({
-      validKey: 'value',
-      anotherValidKey: 123,
-      nestedObject: {
-        validNestedKey: 'nestedValue',
-        anotherLevel: {
-          validKey: 'value',
-        },
-      },
-    });
-    expect(console.error).not.toHaveBeenCalled();
-  });
-
-  test('should handle multiple errors in one call', () => {
-    createStateOrContext({
-      thisKeyIsWayTooLongForOurRequirements: 'value', // Key length
-      invalid_key: 'value', // Special character
-      invalidKey1: 'value', // Contains number
-      InvalidCamelCase: 'value', // Not camelCase
-      validKey: {
-        nestedTooDeep: {
-          anotherLevel: {
-            tooDeepKey: 'too deep', // Exceeds depth
-          },
-        },
-      },
-      undefinedValue: undefined, // Invalid value
-    });
-
-    expect(console.error).toHaveBeenCalledWith(
-      'Invalid key "thisKeyIsWayTooLongForOurRequirements": Key length must not exceed 20 characters.',
-    );
-    expect(console.error).toHaveBeenCalledWith(
-      'Invalid key "invalid_key": Key must contain only alphabetic characters (no numbers or special characters).',
-    );
-    expect(console.error).toHaveBeenCalledWith(
-      'Invalid key "invalidKey1": Key must contain only alphabetic characters (no numbers or special characters).',
-    );
-    expect(console.error).toHaveBeenCalledWith(
-      'Invalid key "InvalidCamelCase": Key must be in camelCase format.',
-    );
-    expect(console.error).toHaveBeenCalledWith(
-      'Invalid structure: Data must not be nested deeper than 3 levels.',
-    );
-    expect(console.error).toHaveBeenCalledWith(
-      'Invalid value for key "undefinedValue": Value must not be undefined, null, blank, or false.',
-    );
-  });
-});