@lynx-js/web-mainthread-apis 0.7.0

package/dist/elementAPI/style/cssPropertyMap.js

@@ -0,0 +1,228 @@
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+const cacheForCamelize = {};
+export function camelize(str) {
+    if (cacheForCamelize[str]) {
+        return cacheForCamelize[str];
+    }
+    const result = (str + '').replace(/-\D/g, function (match) {
+        return match.charAt(1).toUpperCase();
+    });
+    cacheForCamelize[str] = result;
+    return result;
+}
+let index = 1;
+const cssPropertyMap = {};
+const cssPropertyReverseMap = {};
+const V = (name, defaultValue) => {
+    const k = index++;
+    cssPropertyMap[k] = { name: camelize(name), dashName: name, defaultValue };
+    cssPropertyReverseMap[name] = k;
+};
+V('top', 'auto');
+V('left', 'auto');
+V('right', 'auto');
+V('bottom', 'auto');
+V('position', 'relative');
+V('box-sizing', 'auto');
+V('background-color', 'transparent');
+V('border-left-color', 'black');
+V('border-right-color', 'black');
+V('border-top-color', 'black');
+V('border-bottom-color', 'black');
+V('border-radius', '0px');
+V('border-top-left-radius', '0px');
+V('border-bottom-left-radius', '0px');
+V('border-top-right-radius', '0px');
+V('border-bottom-right-radius', '0px');
+V('border-width', '0px');
+V('border-left-width', '0px');
+V('border-right-width', '0px');
+V('border-top-width', '0px');
+V('border-bottom-width', '0px');
+V('color', 'black');
+V('opacity', '1');
+V('display', 'auto');
+V('overflow', 'hidden');
+V('height', 'auto');
+V('width', 'auto');
+V('max-width', 'auto');
+V('min-width', 'auto');
+V('max-height', 'auto');
+V('min-height', 'auto');
+V('padding', '0px');
+V('padding-left', '0px');
+V('padding-right', '0px');
+V('padding-top', '0px');
+V('padding-bottom', '0px');
+V('margin', '0px');
+V('margin-left', '0px');
+V('margin-right', '0px');
+V('margin-top', '0px');
+V('margin-bottom', '0px');
+V('white-space', 'normal');
+V('letter-spacing', '0px');
+V('text-align', 'start');
+V('line-height', '');
+V('text-overflow', 'clip');
+V('font-size', 'medium');
+V('font-weight', 'normal');
+V('flex', '0');
+V('flex-grow', '0');
+V('flex-shrink', '1');
+V('flex-basis', 'auto');
+V('flex-direction', 'row');
+V('flex-wrap', 'nowrap');
+V('align-items', 'stretch');
+V('align-self', 'stretch');
+V('align-content', 'stretch');
+V('justify-content', 'stretch');
+V('background', 'transparent, transparent');
+V('border-color', 'black');
+V('font-family', '');
+V('font-style', 'normal');
+V('transform', '');
+V('animation', '');
+V('animation-name', '');
+V('animation-duration', '');
+V('animation-timing-function', 'linear');
+V('animation-delay', '0s');
+V('animation-iteration-count', '1');
+V('animation-direction', 'normal');
+V('animation-fill-mode', 'none');
+V('animation-play-state', 'running');
+V('line-spacing', '0px');
+V('border-style', 'solid');
+V('order', '0');
+V('box-shadow', '');
+V('transform-origin', '');
+V('linear-orientation', 'vertical');
+V('linear-weight-sum', '0');
+V('linear-weight', '0');
+V('linear-gravity', 'none');
+V('linear-layout-gravity', 'none');
+V('layout-animation-create-duration', '0s');
+V('layout-animation-create-timing-function', 'linear');
+V('layout-animation-create-delay', '0s');
+V('layout-animation-create-property', 'opacity');
+V('layout-animation-delete-duration', '0s');
+V('layout-animation-delete-timing-function', 'linear');
+V('layout-animation-delete-delay', '0s');
+V('layout-animation-delete-property', 'opacity');
+V('layout-animation-update-duration', '0s');
+V('layout-animation-update-timing-function', 'linear');
+V('layout-animation-update-delay', '0s');
+V('adapt-font-size', '0');
+V('aspect-ratio', '');
+V('text-decoration', '');
+V('text-shadow', '');
+V('background-image', '');
+V('background-position', '');
+V('background-origin', 'border-box');
+V('background-repeat', 'no-repeat');
+V('background-size', '');
+V('border', '');
+V('visibility', 'visible');
+V('border-right', '');
+V('border-left', '');
+V('border-top', '');
+V('border-bottom', '');
+V('transition', '');
+V('transition-property', '');
+V('transition-duration', '');
+V('transition-delay', '');
+V('transition-timing-function', '');
+V('content', '');
+V('border-left-style', '');
+V('border-right-style', '');
+V('border-top-style', '');
+V('border-bottom-style', '');
+V('implicit-animation', 'true');
+V('overflow-x', 'hidden');
+V('overflow-y', 'hidden');
+V('word-break', 'normal');
+V('background-clip', 'border-box');
+V('outline', 'medium none black');
+V('outline-color', 'black');
+V('outline-style', 'black');
+V('outline-width', 'medium');
+V('vertical-align', 'default');
+V('caret-color', 'auto');
+V('direction', 'normal');
+V('relative-id', '-1');
+V('relative-align-top', '-1');
+V('relative-align-right', '-1');
+V('relative-align-bottom', '-1');
+V('relative-align-left', '-1');
+V('relative-top-of', '-1');
+V('relative-right-of', '-1');
+V('relative-bottom-of', '-1');
+V('relative-left-of', '-1');
+V('relative-layout-once', 'true');
+V('relative-center', 'none');
+V('enter-transition-name', '');
+V('exit-transition-name', '');
+V('pause-transition-name', '');
+V('resume-transition-name', '');
+V('flex-flow', 'row nowrap');
+V('z-index', '0');
+V('text-decoration-color', 'black');
+V('linear-cross-gravity', 'none');
+V('margin-inline-start', '0px');
+V('margin-inline-end', '0px');
+V('padding-inline-start', '0px');
+V('padding-inline-end', '0px');
+V('border-inline-start-color', 'black');
+V('border-inline-end-color', 'black');
+V('border-inline-start-width', '0px');
+V('border-inline-end-width', '0px');
+V('border-inline-start-style', '');
+V('border-inline-end-style', '');
+V('border-start-start-radius', '0px');
+V('border-end-start-radius', '0px');
+V('border-start-end-radius', '0px');
+V('border-end-end-radius', '0px');
+V('relative-align-inline-start', '-1');
+V('relative-align-inline-end', '-1');
+V('relative-inline-start-of', '-1');
+V('relative-inline-end-of', '-1');
+V('inset-inline-start', '0px');
+V('inset-inline-end', '0px');
+V('mask-image', '');
+V('grid-template-columns', '');
+V('grid-template-rows', '');
+V('grid-auto-columns', '');
+V('grid-auto-rows', '');
+V('grid-column-span', '');
+V('grid-row-span', '');
+V('grid-column-start', '');
+V('grid-column-end', '');
+V('grid-row-start', '');
+V('grid-row-end', '');
+V('grid-column-gap', '');
+V('grid-row-gap', '');
+V('justify-items', 'stretch');
+V('justify-self', 'auto');
+V('grid-auto-flow', 'row');
+V('filter', '');
+V('list-main-axis-gap', '0px');
+V('list-cross-axis-gap', '0px');
+V('linear-direction', 'column');
+V('perspective', 'none');
+V('cursor', 'default');
+V('text-indent', '0px');
+V('clip-path', '');
+V('text-stroke', '0px transparent');
+V('text-stroke-width', '0px');
+V('text-stroke-color', 'transparent');
+V('-x-auto-font-size', 'false');
+V('-x-auto-font-size-preset-sizes', '');
+export function queryCSSProperty(index) {
+    return cssPropertyMap[index];
+}
+export function queryCSSPropertyNumber(name) {
+    return cssPropertyReverseMap[name];
+}
+export { cssPropertyMap };
+//# sourceMappingURL=cssPropertyMap.js.map

package/dist/elementAPI/style/styleFunctions.d.ts

@@ -0,0 +1,7 @@
+import type { ElementThreadElement } from '../ElementThreadElement.js';
+export declare function __AddClass(element: ElementThreadElement, className: string): void;
+export declare function __SetClasses(element: ElementThreadElement, classNames: string | null): void;
+export declare function __GetClasses(element: ElementThreadElement): string[];
+export declare function __AddInlineStyle(element: ElementThreadElement, key: number | string, value: string | undefined): void;
+export declare function __SetInlineStyles(element: ElementThreadElement, value: string | Record<string, string> | undefined): void;
+export declare function __SetCSSId(elements: (ElementThreadElement)[], cssId: string | number): void;

package/dist/elementAPI/style/styleFunctions.js

@@ -0,0 +1,65 @@
+import { cssIdAttribute } from '@lynx-js/web-constants';
+import hyphenateStyleName from 'hyphenate-style-name';
+import { queryCSSProperty } from './cssPropertyMap.js';
+import { decodeCssInJs } from '../../utils/decodeCssInJs.js';
+import { transformInlineStyleString, transfromParsedStyles, } from './transformInlineStyle.js';
+function updateInlineStyleForCssInJs(element, newClassNames) {
+    const classStyleStr = decodeCssInJs(newClassNames, element.styleInfo, element.attributes[cssIdAttribute]);
+    element.updateCssInJsGeneratedStyle(classStyleStr);
+}
+export function __AddClass(element, className) {
+    const newClassName = ((element.attributes.class ?? '') + ' ' + className)
+        .trim();
+    element.setAttribute('class', newClassName);
+    if (!element.pageConfig.enableCSSSelector) {
+        updateInlineStyleForCssInJs(element, newClassName);
+    }
+}
+export function __SetClasses(element, classNames) {
+    element.setAttribute('class', classNames);
+    if (!element.pageConfig.enableCSSSelector) {
+        updateInlineStyleForCssInJs(element, classNames ?? '');
+    }
+}
+export function __GetClasses(element) {
+    return (element.attributes.class ?? '').split(' ').filter(e => e);
+}
+export function __AddInlineStyle(element, key, value) {
+    const lynxStyleInfo = queryCSSProperty(Number(key));
+    if (!value) {
+        element.setStyleProperty(lynxStyleInfo.dashName, null);
+        return;
+    }
+    const { transformedStyle } = transfromParsedStyles([[
+            lynxStyleInfo.dashName,
+            value,
+        ]]);
+    for (const [property, value] of transformedStyle) {
+        element.setStyleProperty(property, value);
+    }
+}
+export function __SetInlineStyles(element, value) {
+    if (!value)
+        return;
+    const { transformedStyle } = typeof value === 'string'
+        ? transformInlineStyleString(value)
+        : transfromParsedStyles(Object.entries(value).map(([k, value]) => [
+            hyphenateStyleName(k),
+            value,
+        ]));
+    const transformedStyleStr = transformedStyle.map(([property, value]) => `${property}:${value};`).join('');
+    element.setAttribute('style', transformedStyleStr);
+}
+export function __SetCSSId(elements, cssId) {
+    cssId = cssId.toString();
+    for (const element of elements) {
+        if (element.getAttribute(cssIdAttribute) === cssId)
+            continue; // skip operation
+        element.setAttribute(cssIdAttribute, cssId);
+        if (!element.pageConfig.enableCSSSelector) {
+            const cls = element.getAttribute('class');
+            cls && __SetClasses(element, cls);
+        }
+    }
+}
+//# sourceMappingURL=styleFunctions.js.map

package/dist/elementAPI/style/transformInlineStyle.d.ts

@@ -0,0 +1,8 @@
+export declare function transformInlineStyleString(str: string): {
+    childStyle: [string, string][];
+    transformedStyle: [string, string][];
+};
+export declare function transfromParsedStyles(hyphenatedStyleObject: [property: string, value: string][]): {
+    childStyle: [string, string][];
+    transformedStyle: [string, string][];
+};

package/dist/elementAPI/style/transformInlineStyle.js

@@ -0,0 +1,42 @@
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+// @ts-expect-error
+import * as tokenizer from 'css-tree/tokenizer';
+import { transformLynxStyles } from '@lynx-js/web-style-transformer';
+function parseStyleStringToObject(str) {
+    const hypenNameStyles = [];
+    let beforeColonToken = true;
+    let propertyStart = 0;
+    let propertyEnd = 0;
+    let valueStart = 0;
+    let valueEnd = 0;
+    tokenizer.tokenize(str + ';', (type, start, end) => {
+        if (type === tokenizer.Semicolon || tokenizer.EOF) {
+            valueEnd = start;
+            const trimedProperty = str.substring(propertyStart, propertyEnd).trim();
+            const trimedValue = str.substring(valueStart, valueEnd).trim();
+            if (!beforeColonToken && trimedValue && trimedProperty) {
+                hypenNameStyles.push([
+                    trimedProperty,
+                    trimedValue,
+                ]);
+            }
+            beforeColonToken = true;
+            propertyStart = end;
+        }
+        else if (type === tokenizer.Colon && beforeColonToken) {
+            beforeColonToken = false;
+            valueStart = end;
+            propertyEnd = start;
+        }
+    });
+    return hypenNameStyles;
+}
+export function transformInlineStyleString(str) {
+    return transfromParsedStyles(parseStyleStringToObject(str));
+}
+export function transfromParsedStyles(hyphenatedStyleObject) {
+    return transformLynxStyles(hyphenatedStyleObject);
+}
+//# sourceMappingURL=transformInlineStyle.js.map

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MainThreadRuntime.js';
+export { ElementThreadElement } from './elementAPI/ElementThreadElement.js';

package/dist/index.js

@@ -0,0 +1,6 @@
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+export * from './MainThreadRuntime.js';
+export { ElementThreadElement } from './elementAPI/ElementThreadElement.js';
+//# sourceMappingURL=index.js.map

package/dist/utils/decodeCssInJs.d.ts

@@ -0,0 +1,8 @@
+import type { CssInJsInfo } from '@lynx-js/web-constants';
+/**
+ * @param classes
+ * @param styleInfo it should be flattened, which means there is no imports field in the styleInfo
+ * @param cssId
+ * @returns
+ */
+export declare function decodeCssInJs(classes: string, styleInfo: CssInJsInfo, cssId: string | null): string;

package/dist/utils/decodeCssInJs.js

@@ -0,0 +1,23 @@
+/**
+ * @param classes
+ * @param styleInfo it should be flattened, which means there is no imports field in the styleInfo
+ * @param cssId
+ * @returns
+ */
+export function decodeCssInJs(classes, styleInfo, cssId) {
+    const classList = classes.split(' ').filter(e => e);
+    let declarations = [];
+    const currentStyleInfo = styleInfo[cssId ?? '0'];
+    if (currentStyleInfo) {
+        for (const oneClassName of classList) {
+            const oneRule = currentStyleInfo[oneClassName];
+            if (oneRule)
+                declarations.push(...oneRule);
+        }
+    }
+    else {
+        throw new Error(`[lynx-web] cannot find styleinfo for cssid ${cssId}`);
+    }
+    return declarations.map(([property, value]) => `${property}:${value};`).join('');
+}
+//# sourceMappingURL=decodeCssInJs.js.map

package/dist/utils/processStyleInfo.d.ts

@@ -0,0 +1,14 @@
+import { type StyleInfo, type CssInJsInfo, type PageConfig, type BrowserConfig } from '@lynx-js/web-constants';
+export declare function flattenStyleInfo(styleInfo: StyleInfo): void;
+/**
+ * apply the lynx css -> web css transformation
+ */
+export declare function transformToWebCss(styleInfo: StyleInfo): void;
+/**
+ * generate those styles applied by <style>...</style>
+ */
+export declare function genCssContent(styleInfo: StyleInfo, entryId: string, pageConfig: PageConfig, browserConfig: BrowserConfig): string;
+/**
+ * generate the css-in-js data
+ */
+export declare function genCssInJsInfo(styleInfo: StyleInfo): CssInJsInfo;

package/dist/utils/processStyleInfo.js

@@ -0,0 +1,119 @@
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { cssIdAttribute, lynxTagAttribute, cardIdAttribute, } from '@lynx-js/web-constants';
+import { transformLynxStyles } from '@lynx-js/web-style-transformer';
+export function flattenStyleInfo(styleInfo) {
+    function flattenOneStyleInfo(cssId) {
+        const oneInfo = styleInfo[cssId];
+        const imports = oneInfo?.imports;
+        if (oneInfo && imports?.length) {
+            for (const im of imports) {
+                const flatInfo = flattenOneStyleInfo(im);
+                if (flatInfo) {
+                    oneInfo.content.push(...flatInfo.content);
+                    oneInfo.rules.push(...flatInfo.rules);
+                }
+            }
+            oneInfo.imports = undefined;
+        }
+        return oneInfo;
+    }
+    Object.keys(styleInfo).map((cssId) => {
+        flattenOneStyleInfo(cssId);
+    });
+}
+/**
+ * apply the lynx css -> web css transformation
+ */
+export function transformToWebCss(styleInfo) {
+    for (const cssInfos of Object.values(styleInfo)) {
+        for (const rule of cssInfos.rules) {
+            const { sel: selectors, decl: declarations } = rule;
+            const { transformedStyle, childStyle } = transformLynxStyles(declarations);
+            rule.decl = transformedStyle;
+            if (childStyle.length > 0) {
+                cssInfos.rules.push({
+                    sel: selectors.map(selector => [
+                        selector[0].concat(['>', '*']),
+                        selector[1],
+                        selector[2],
+                    ]),
+                    decl: childStyle,
+                });
+            }
+        }
+    }
+}
+/**
+ * generate those styles applied by <style>...</style>
+ */
+export function genCssContent(styleInfo, entryId, pageConfig, browserConfig) {
+    function getExtraSelectors(cssId) {
+        let prepend = '', suffix = '';
+        if (!pageConfig.enableRemoveCSSScope) {
+            if (cssId !== undefined) {
+                suffix += `[${cssIdAttribute}="${cssId}"]`;
+            }
+            else {
+                // To make sure the Specificity correct
+                suffix += `[${lynxTagAttribute}]`;
+            }
+        }
+        if (!browserConfig.supportAtScope) {
+            prepend = `[${cardIdAttribute}="${entryId}"] `
+                + prepend;
+        }
+        return { prepend, suffix };
+    }
+    const finalCssContent = [];
+    for (const [cssId, cssInfos] of Object.entries(styleInfo)) {
+        const { prepend, suffix } = getExtraSelectors(cssId);
+        const declarationContent = cssInfos.rules.map((rule) => {
+            const { sel: selectors, decl: declarations } = rule;
+            const selectorString = selectors.map(([plainSelectors, pseudoClassSelectors, pseudoElementSelectors]) => {
+                return [
+                    prepend,
+                    plainSelectors.join(''),
+                    suffix,
+                    pseudoClassSelectors.join(''),
+                    pseudoElementSelectors.join(''),
+                ].join('');
+            }).join(',');
+            const declarationString = declarations.map(([k, v]) => `${k}:${v};`).join('');
+            return `${selectorString}{${declarationString}}`;
+        }).join('');
+        finalCssContent.push(...cssInfos.content, declarationContent);
+    }
+    return finalCssContent.join('\n');
+}
+/**
+ * generate the css-in-js data
+ */
+export function genCssInJsInfo(styleInfo) {
+    return Object.fromEntries(Object.entries(styleInfo).map(([cssId, cssInfos]) => {
+        const oneCssInJsInfo = {};
+        cssInfos.rules = cssInfos.rules.filter(oneCssInfo => {
+            oneCssInfo.sel = oneCssInfo.sel.filter(selectorList => {
+                const [classSelectors, pseudoClassSelectors, pseudoElementSelectors] = selectorList;
+                if (classSelectors.length === 1 && classSelectors[0][0] === '.'
+                    && pseudoClassSelectors.length === 0
+                    && pseudoElementSelectors.length === 0) {
+                    const selectorName = classSelectors[0].substring(1);
+                    const currentDeclarations = oneCssInJsInfo[selectorName];
+                    if (currentDeclarations) {
+                        currentDeclarations.push(...oneCssInfo.decl);
+                    }
+                    else {
+                        oneCssInJsInfo[selectorName] = oneCssInfo.decl;
+                    }
+                    return false; // remove this selector from style info
+                }
+                return true;
+            });
+            return oneCssInfo.sel.length > 0;
+        });
+        return [cssId, oneCssInJsInfo];
+    }));
+}
+//# sourceMappingURL=processStyleInfo.js.map

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@lynx-js/web-mainthread-apis",
+  "version": "0.7.0",
+  "private": false,
+  "description": "",
+  "keywords": [],
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "!dist/**/*.js.map",
+    "LICENSE.txt",
+    "Notice.txt",
+    "CHANGELOG.md",
+    "README.md",
+    "**/*.css"
+  ],
+  "dependencies": {
+    "css-tree": "^3.1.0",
+    "hyphenate-style-name": "^1.1.0",
+    "@lynx-js/web-constants": "0.7.0",
+    "@lynx-js/web-style-transformer": "0.2.1"
+  }
+}