@shijiu/jsview 2.3.151-test.0 → 3.0.0

package/patches/@vue+compiler-sfc+3.2.45.patch

@@ -0,0 +1,1986 @@
+diff --git a/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js b/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js
+index 2e1517a..89a91a2 100644
+--- a/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js
++++ b/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js
+@@ -16,6 +16,9 @@ var fs = require('fs');
+ var util$2 = require('util');
+ var reactivityTransform = require('@vue/reactivity-transform');
+ var _postcss = require('postcss');
++// JsView Added >>>
++var jsvCssToJs = require("./jsview-css-to-js");
++// JsView Added <<<
+ 
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+ 
+@@ -3223,7 +3226,11 @@ function doCompileTemplate({ filename, id, scoped, slotted, inMap, source, ssr =
+     let { code, ast, preamble, map } = compiler.compile(source, {
+         mode: 'module',
+         prefixIdentifiers: true,
+-        hoistStatic: true,
++// JsView Added >>>
++// 解决xxx问题。
++//        hoistStatic: true,
++        hoistStatic: false,
++// JsView Added <<<
+         cacheHandlers: true,
+         ssrCssVars: ssr && ssrCssVars && ssrCssVars.length
+             ? genCssVarsFromList(ssrCssVars, shortId, isProd, true)
+@@ -3512,6 +3519,10 @@ function compileScript(sfc, options) {
+                 content += genNormalScriptCssVarsCode(cssVars, bindings, scopeId, isProd);
+                 content += `\nexport default ${DEFAULT_VAR}`;
+             }
++// JsView Added >>>
++// 在标准写法下，将Css转换为Js, 并注入到Js文件。
++            content += jsvCssToJs.compileCssToJs(sfc, options);
++// JsView Added <<<
+             return {
+                 ...script,
+                 content,
+@@ -4593,6 +4604,10 @@ function compileScript(sfc, options) {
+             .join(', ')} } from 'vue'\n`);
+     }
+     s.trim();
++// JsView Added >>>
++// 在setup写法下，将Css转换为Js, 并注入到Js文件。
++    s.append(jsvCssToJs.compileCssToJs(sfc, options));
++// JsView Added <<<
+     return {
+         ...scriptSetup,
+         bindings: bindingMetadata,
+@@ -5272,6 +5287,10 @@ function parse(source, { sourceMap = true, filename = DEFAULT_FILENAME, sourceRo
+     // check if the SFC uses :slotted
+     const slottedRE = /(?:::v-|:)slotted\(/;
+     descriptor.slotted = descriptor.styles.some(s => s.scoped && slottedRE.test(s.content));
++// JsView Added >>>
++// 如果不存在<script>标签，则手动添加一个用于处理Css转为Js。
++    jsvCssToJs.ensureSfcDescriptor(descriptor);
++// JsView Added <<<
+     const result = {
+         descriptor,
+         errors
+diff --git a/node_modules/@vue/compiler-sfc/dist/jsview-css-to-js.js b/node_modules/@vue/compiler-sfc/dist/jsview-css-to-js.js
+new file mode 100644
+index 0000000..295b919
+--- /dev/null
++++ b/node_modules/@vue/compiler-sfc/dist/jsview-css-to-js.js
+@@ -0,0 +1,487 @@
++/*
++ * QCode Added
++ */
++'use strict';
++
++Object.defineProperty(exports, '__esModule', { value: true });
++
++const crypto = require('crypto');
++const fs = require('fs');
++const path = require('path');
++const postCss = require('postcss');
++const postCssJs = require('postcss-js');
++const styleChecker = require('./jsview-style-checker');
++const { Logger } = require('@shijiu/jsview/tools/jsview-logger.cjs');
++
++const compilerSfc = require('./compiler-sfc.cjs');
++const processorLangList = [
++    'less',
++    'sass',
++    'scss',
++    'styl',
++    'stylus',
++];
++
++const cachedCssStyles = {};
++
++function ensureSfcDescriptor(descriptor) {
++    try {
++        ensureSfcDescriptorImpl(descriptor)
++    } catch (exception) {
++        Logger.ErrorAndThrow(Logger.GetFileTag(descriptor.filename), 'Failed to call ensureSfcDescriptor()!');
++    }
++}
++
++function compileCssToJs(sfc, options) {
++    try {
++        // 必须在此处parse css，否则npm run build时进入不到js代码中。
++        // const styleJsFilePath = getStyleJsFilePath(sfc.filename);
++        // return `\nimport '${styleJsFilePath}';`
++
++        const compiledJsContent = compileCssToJsImpl(sfc, options)
++        return compiledJsContent;
++    } catch (exception) {
++        Logger.ErrorAndExit(Logger.GetFileTag(sfc.filename), 'Failed to call compileCssToJs()!', exception);
++    }
++}
++
++function compileCssToJsImpl(sfc, options) {
++    let cachedStyleImports = [];
++    let cachedStyleSheets = {};
++    for (const style of sfc.styles) {
++        if(!!style.module) {
++            let errMsg = 'style module is not released by Vue3!\n';
++            errMsg += style;
++            Logger.ErrorAndThrow(Logger.GetFileTag(sfc.filename), errMsg + ' errors =', errors);
++        }
++
++        const compileStyleOptions = {
++            filename: sfc.filename,
++            id: `data-v-${options.id}`,
++            // map: null,
++            trim: true,
++            isProd: options.isProd,
++
++            source: style.content,
++            scoped: style.scoped,
++            modules: style.module,
++
++            preprocessLang: style.attrs.lang,
++        };
++
++        if(!!style.attrs.src) { // 处理<style [scoped] src='xxx'>
++            const baseDir = path.dirname(sfc.filename);
++            const cssSrcPath = path.resolve(baseDir, style.attrs.src);
++            compileStyleOptions.source = fs.readFileSync(cssSrcPath, 'utf8');
++        }
++
++        const { rawResult, errors } = compilerSfc.compileStyle(compileStyleOptions)
++        if(errors.length) {
++            const errMsg = 'Failed to compile style when convert css to js!';
++            Logger.ErrorAndThrow(Logger.GetFileTag(sfc.filename), errMsg + ' errors =', errors);
++        }
++        
++        const {styleImports, styleSheets } = compileAndSaveImportedNode(rawResult.result.root.nodes);
++        cachedStyleImports = [...cachedStyleImports, ...styleImports];
++        cachedStyleSheets = { ...cachedStyleSheets, ...styleSheets };
++    }
++
++    const styleJsContents = serializeStyleJsFile(cachedStyleImports, cachedStyleSheets);
++
++    // Logger.Debug(Logger.GetFileTag(sfc.filename), 'styleJsContents=', styleJsContents);
++
++    return styleJsContents;
++}
++
++function ensureSfcDescriptorImpl(descriptor) {
++    // 如果css-style不存在，不做任何事
++    if(descriptor.styles.length <= 0) {
++        return;
++    }
++
++    // 为了将css-style植入到script中，script或scriptSetup必须存在一个
++    if(!!descriptor.script
++    || !!descriptor.scriptSetup) {
++        return;
++    }
++
++    // 为了触发compiler-sfc.cjs.compileScript()
++    // 如果script和scriptSetup都不存在，就做一个空的
++    // Logger.Debug('insert a empty script.');
++    descriptor.script = {
++        type: 'script',
++        content: 'export default {}\n',
++        loc: {
++            source: '',
++            start: { column: 0, line: 0, offset: 0 },
++            end: { column: 0, line: 0, offset: 0}
++        },
++        attrs: {},
++        map: {
++            version: 3,
++            sources: [],
++            names: [],
++            mappings: '',
++            // file: null,
++            sourceRoot: '',
++            sourcesContent: []
++        }
++    };
++}
++
++function checkSelectors(node, styleFilePath, styleSelectors) {
++    for(let cachedFilePath in cachedCssStyles) {
++        if(cachedFilePath == styleFilePath) {
++            continue;
++        }
++
++        const cachedSelectors = cachedCssStyles[cachedFilePath];
++        for(let selector of cachedSelectors) {
++            if(styleSelectors.has(selector)) { // 发现重复的selector
++                if (selector.includes['['] && selector.includes[']']) { // scoped style
++                    let errMsg = 'Multi defined CSS selector "' + selector + '" from ' + node.source.input.file + '.\n';
++                    errMsg += 'It has been defined in ' + cachedFilePath + '.\n';
++                    Logger.Warn(Logger.GetFileTag(node.source.input.file), errMsg);
++                }
++                return false;
++            }
++        }
++    }
++
++    // 添加到缓存
++    let cachedSelectors = cachedCssStyles[styleFilePath];
++    if(!cachedSelectors) {
++        cachedSelectors = new Set()
++    }
++    cachedSelectors = new Set([...cachedSelectors, ...styleSelectors]);
++    cachedCssStyles[styleFilePath] = cachedSelectors;
++
++    return true;
++}
++
++function check(expr, node, source, errMsg) {
++    if(!expr) {
++        errMsg += ('\n source is: \n' + source);
++        Logger.ErrorAndThrow(Logger.GetFileTag(node.source.input.file), errMsg);
++    }
++}
++
++function compileAndSaveImportedNode(styleNodes) {
++    let styleImports = [];
++    let styleSheets = {};
++
++    for(const node of styleNodes) {
++        if (node.type === 'comment'
++        || node.name === '-webkit-keyframes'
++        || node.name === 'charset') {
++                // DO NOTHING
++        } else if(node.name === 'import') {
++            const importContent = compileImportNodeRecursive(node);
++            if (importContent && styleImports.includes(importContent) == false) {
++                styleImports.push(importContent);
++            }
++        } else if(node.name === 'keyframes') {
++            const styleFilePath = node.source.input.file;
++            const styleSelectors = new Set([node.params]);
++            const checked = checkSelectors(node, styleFilePath, styleSelectors); // 检测selector是否已经处理过
++            if (checked == false) {
++                Logger.Warn(Logger.GetFileTag(node.source.input.file), 'Multi defined CSS keyframes "' + node.params + '".\n');
++            }
++
++            const subStyleSheets = compileKeyframesNode(node);
++            for (const [scopedId, styleRules] of Object.entries(subStyleSheets)) {
++                styleSheets[scopedId] = Object.assign(styleSheets[scopedId] ?? {}, styleRules);
++            }
++        } else if(!!node.selector) {
++            const styleFilePath = node.source.input.file;
++            const styleSelectors = new Set([node.selector]);
++            const checked = checkSelectors(node, styleFilePath, styleSelectors); // 检测selector是否已经处理过
++            if (checked == false) {
++                Logger.Warn(Logger.GetFileTag(node.source.input.file), 'Multi defined CSS selector "' + node.selector + '".\n');
++            }
++
++            const subStyleSheets = compileSelectorNode(node);
++            for (const [scopedId, styleRules] of Object.entries(subStyleSheets)) {
++                const mergedStyleRules = styleSheets[scopedId] ?? {};
++                for (const [selector, declarations] of Object.entries(styleRules)) {
++                    let mergedDeclarations = mergedStyleRules[selector] ?? '{}';
++                    mergedDeclarations = Object.assign(JSON.parse(mergedDeclarations), JSON.parse(declarations));
++                    mergedStyleRules[selector] = JSON.stringify(mergedDeclarations);
++                }
++                styleSheets[scopedId] = mergedStyleRules;
++            }
++            styleSelectors.add(node.selector);
++        } else if (node.name === '-moz-keyframes'
++        || node.name === '-o-keyframes'
++        || node.name === '-webkit-keyframes') {
++            // Stylus 添加的keyframes，忽略，只处理@keyframes
++        } else {
++            Logger.Info(Logger.GetFileTag(node.source.input.file), 'Unsupported css node: ', node);
++            check(false, node, node.source.input.css, 'Unsupported css node from import css file.');
++        }
++    }
++
++    // Logger.Debug(Logger.GetFileTag(node.source.input.file), 'jsview-css-to-js.compileAndSaveImportedNode() styleSheets=', styleImports, styleSheets);
++    return {
++        styleImports,
++        styleSheets,
++    }
++}
++
++function serializeStyleJsFile(styleImports, styleSheets) {
++    let styleJsContent = '\n';
++
++    if (styleImports.length > 0) {
++        const styleImportsContent = styleImports.join('\n');
++        styleJsContent += styleImportsContent;
++    }
++
++    if (Object.keys(styleSheets).length > 0) {
++        const styleSheetsContent = JSON.stringify(styleSheets);
++        styleJsContent += '\nconst styleSheetsContent = ';
++        styleJsContent += styleSheetsContent;
++        styleJsContent += ';\nwindow.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);';
++    }
++
++    return styleJsContent;
++}
++
++function getStyleJsCacheDir() {
++    const nodeModulesDir = path.resolve(process.cwd(), 'node_modules');
++    const cacheDir = path.resolve(nodeModulesDir, '.vite', 'jsview', 'css-to-js'); // 不能放在.vite文件夹，否则有网络缓存，文件改变后不更新
++    if (!fs.existsSync(cacheDir)) {
++        fs.mkdirSync(cacheDir, { recursive: true });
++    }
++
++    return cacheDir;
++}
++
++function getStyleJsFilePath(styleFilePath) {
++    // 保存到js文件并import到script中
++    const cacheDir = getStyleJsCacheDir()
++
++    const styleFilePathHash = crypto.createHash('md5').update(styleFilePath).digest('hex').substring(0, 8);
++    const styleJsFileName = path.basename(styleFilePath) + '.' + styleFilePathHash + '.js';
++    const styleJsFilePath = path.join(cacheDir, styleJsFileName);
++    if (!fs.existsSync(styleJsFilePath)) {
++        fs.closeSync(fs.openSync(styleJsFilePath, 'w'));
++    }
++
++    return styleJsFilePath;
++}
++
++function getStringOffset(node, source, line, column) {
++    check(!isNaN(line), node, source, 'Failed to get string offset, line is NaN.');
++    check(!isNaN(column), node, source, 'Failed to get string offset, column is NaN.');
++
++    line -= 1;
++    column -= 1;
++
++    var offset = 0;
++    for (var idx = 0; idx < line; idx++) {
++        offset = source.indexOf('\n', offset + 1);
++        check(offset >= 0, node, source, 'Failed to get string offset, line=' + line + ', column=' + column);
++    }
++    offset += column;
++
++    return offset;
++}
++
++function compileImportNodeRecursive(node, parsedImports = []) {
++    const name = node.name;
++    check(name === 'import', node, node.source.input.css, '@import name is not found!');
++
++    let cssFilePath = node.params.replaceAll('"', '');
++    cssFilePath = cssFilePath.replaceAll("'", '');
++    const baseDir = path.dirname(node.source.input.file);
++    const cssFileFullPath = path.resolve(baseDir, cssFilePath);
++    const styleJsFilePath = getStyleJsFilePath(cssFileFullPath);
++
++    // 解死循环
++    if (parsedImports.includes(cssFileFullPath)) {
++        Logger.Info(Logger.GetFileTag(node.source.input.file), 'Ignore to parse file in dead loop: ' + cssFileFullPath);
++        return null;
++    }
++    parsedImports.push(cssFileFullPath);
++
++    try {
++        const content = fs.readFileSync(cssFileFullPath, 'utf8');;
++        const options = {
++            from: cssFileFullPath
++        };
++        const parsedCss = postCss([]).process(content, options);
++
++        const styleNodes = parsedCss.result.root.nodes;
++        const styleImportNodes = [];
++        const importNodeIndexs = [];
++        for (let idx = 0; idx < styleNodes.length; idx++) {
++            const node = styleNodes[idx];
++            if (node.name !== 'import') {
++                continue;
++            }
++
++            importNodeIndexs.push(idx);
++        }
++        for (const idx of importNodeIndexs) {
++            const node = styleNodes[idx];
++            styleImportNodes.push(node);
++            styleNodes.splice(idx, 1);
++        }
++
++        const styleImports = [];
++        for (const node of styleImportNodes) {
++            const importContent = compileImportNodeRecursive(node, parsedImports);
++            if (styleImports.includes(importContent) == true) {
++                continue;
++            }
++
++            styleImports.push(importContent);
++        }
++
++        const { _, styleSheets } = compileAndSaveImportedNode(styleNodes);
++        const styleJsContents = serializeStyleJsFile(styleImports, styleSheets);
++
++        fs.writeFileSync(styleJsFilePath, styleJsContents, 'utf8');;
++    } catch (e) {
++        Logger.ErrorAndThrow(Logger.GetFileTag(node.source.input.file), 'Failed to compile css import node.', e);
++    }
++
++    let styleJsFileRelativePath = path.relative(baseDir, styleJsFilePath);
++    styleJsFileRelativePath = styleJsFileRelativePath.replaceAll('\\', '/');
++    const styleImportContent = `\nimport '${styleJsFileRelativePath}';`;
++
++    // Logger.Debug(Logger.GetFileTag(node.source.input.file), 'return ', styleImportContent);
++    return styleImportContent;
++}
++
++function compileKeyframesNode(node) {
++    const name = node.name;
++    check(name, node, node.source.input.css, 'name is not found!');
++
++    check(name === 'keyframes', node, node.source.input.css, '@keyframes name is not found!');
++
++    // let startOffset = node.source.start.offset;
++    // let endOffset = node.source.end.offset;
++    // if (typeof (startOffset) == 'undefined') {
++    //     startOffset = getStringOffset(node.source.input.css, node.source.start.line, node.source.start.column);
++    // }
++    // if (typeof (endOffset) == 'undefined') {
++    //     endOffset = getStringOffset(node.source.input.css, node.source.end.line, node.source.end.column);
++    // }
++    // const content = node.source.input.css.slice(startOffset, endOffset + 1);
++    // Logger.Debug(Logger.GetFileTag(node.source.input.file), startOffset, endOffset, content);
++
++    let content = '{';
++    for (const ident of node.nodes) {
++        if (ident.type === 'comment') {
++            continue;
++        }
++        content += ident.selector;
++        content += '{';
++        for (const declaration of ident.nodes) {
++            content += declaration.prop + ':' + declaration.value + ';';
++        }
++        content += '}';
++    }
++    content += '}';
++    content = content.replaceAll('\\', ''); // 去掉var()里面的 \\
++
++    const kfName = node.params;
++    let kfValue = '@keyframes ' + kfName + ' ' + content;
++    kfValue = styleChecker.GetFormattedKeyframe(node.source.input.file, kfName, kfValue);
++
++    const scopedId = '0'; // CSS规范中，keyframes没有继承, 放在glabol中
++    const kfRule = { [kfName]: kfValue };
++
++    const styleSheets = { [scopedId]: kfRule };
++
++    // Logger.Debug(Logger.GetFileTag(node.source.input.file), 'return ', styleSheets);
++    return styleSheets;
++}
++
++function compileSelectorNode(node) {
++    const selector = node.selector;
++    check(selector, node, node.source.input.css, 'Selector is not found!');
++
++    let errMsg = 'Only class selector is supported!\n';
++    errMsg += 'Please use css like `.classname { property: value; }`';
++    check(selector.startsWith('.'), node, node.source.input.css, errMsg);
++
++    const declarations = postCssJs.objectify(node);
++    const styleSheets = parsePostCssJs(node, selector, declarations);
++
++    // Logger.Debug(Logger.GetFileTag(node.source.input.file), 'return ', styleSheets);
++    return styleSheets;
++}
++
++function parsePostCssJs(node, selector, declarations) {
++    const styleSheets = { };
++
++    // 对 .a, .b {} 的支持
++    const selectorArray = selector.split(',');
++    for (let selector of selectorArray) {
++        selector = selector.trim();
++        
++        let scopedId = selector.substring(selector.indexOf('[') + 1, selector.lastIndexOf(']'));
++        if (scopedId) {
++            selector = selector.substring(0, selector.indexOf('['));
++            scopedId = scopedId.replace('data-v-', '');
++        } else {
++            scopedId = '0';
++        }
++
++        const styleRules = parseUnscopedStyleSheets(node, selector, declarations, scopedId);
++
++        let mergedStyleRules = styleSheets[scopedId] ?? {};
++        mergedStyleRules = Object.assign(mergedStyleRules, styleRules);
++        styleSheets[scopedId] = mergedStyleRules;
++    }
++
++    return styleSheets;
++}
++
++function parseUnscopedStyleSheets(node, selector, declarations, scopedId) {
++    let styleRules = {};
++
++    for (let [name, value] of Object.entries(declarations)) {
++        if (name == 'objectFit' || name == 'overflow') {
++            // 因为<style>标签中添加objectFit和overflow的操作滞后于Element的ClipView创建，
++            // 所以 class 不支持'objectFit' 和 styleName == 'overflow'
++            const errMsg = "Unimplemented style name: " + name + ", please set the " + name + " attribute directly in the element's style.";
++            Logger.Warn(Logger.GetFileTag(node.source.input.file), errMsg);
++        }
++        if (value instanceof Array) { // 同一个name定义了多次
++            Logger.Warn(Logger.GetFileTag(node.source.input.file), 'Multi defined CSS name "' + name + '" from ' + selector + '.\n');
++            value = value[value.length - 1];
++        }
++
++        // 处理var变量中如果存在'a.b'的写法，被翻译成'a\.b'的问题。
++        if (typeof (value) == 'string' && value.startsWith('var(--')) {
++            value = value.replaceAll('\\', '');
++        }
++
++        if (name.startsWith('@keyframes')) { // keyframes解嵌套处理
++            check(false, node, node.source.input.css, 'Nested keyframes is not supported!');
++            delete declarations[name];
++            continue;
++        } else if (value instanceof Object) { // css class解嵌套处理
++            const unscopedName = name.replace('[data-v-' + scopedId + ']', '');
++            const nestedStyleSheets = parseUnscopedStyleSheets(node, selector + ' ' + unscopedName, value, scopedId);
++            styleRules = Object.assign(styleRules, nestedStyleSheets);
++            delete declarations[name];
++            continue;
++        }
++
++        const formattedValue = styleChecker.GetFormattedValue(node.source.input.file, name, value);
++        declarations[name] = formattedValue;
++    }
++
++    styleRules[selector] = JSON.stringify(declarations);
++
++    // Logger.Debug(Logger.GetFileTag(node.source.input.file), 'return ', styleRules);
++    return styleRules;
++}
++
++exports.ensureSfcDescriptor = ensureSfcDescriptor;
++exports.compileCssToJs = compileCssToJs;
++// exports.compileAndSaveImportedNode = compileAndSaveImportedNode;
+diff --git a/node_modules/@vue/compiler-sfc/dist/jsview-style-checker.js b/node_modules/@vue/compiler-sfc/dist/jsview-style-checker.js
+new file mode 100644
+index 0000000..848b451
+--- /dev/null
++++ b/node_modules/@vue/compiler-sfc/dist/jsview-style-checker.js
+@@ -0,0 +1,209 @@
++const {
++  StyleFormator,
++  StyleName,
++  StyleValue,
++  StyleVariable
++} = require("./jsview-style-formator.cjs");
++const { Logger } = require('@shijiu/jsview/tools/jsview-logger.cjs');
++
++class StyleChecker {
++  static GetFormattedValue(fileName, propName, propValue) {
++    propValue = new StyleValue(propValue);
++    if (StyleVariable.IsVariable(propValue)) {
++      return propValue.get();
++    }
++
++    let formattedValue = propValue.get();
++    switch (propName) {
++      case StyleName.Layout.Height:
++      case StyleName.Layout.Left:
++      case StyleName.Layout.Top:
++      case StyleName.Layout.Width:
++        formattedValue = StyleChecker.#GetLayoutValue(fileName, propName, propValue);
++        break;
++      case StyleName.Background.BackgroundColor:
++      case StyleName.Background.BackgroundImage:
++      case StyleName.Background.BorderRadius:
++        formattedValue = StyleChecker.#GetBackgroundValue(fileName, propName, propValue);
++        break;
++      case StyleName.Effect.BackfaceVisibility:
++      case StyleName.Effect.BorderImage:
++      case StyleName.Effect.BorderImageWidth:
++      case StyleName.Effect.BorderImageOutset:
++      case StyleName.Effect.ClipPath:
++      case StyleName.Effect.Display:
++      case StyleName.Effect.ObjectFit:
++      // case StyleName.Effect.Opacity:
++      case StyleName.Effect.Overflow:
++      case StyleName.Effect.Perspective:
++      case StyleName.Effect.PerspectiveOrigin:
++      case StyleName.Effect.Transform:
++      case StyleName.Effect.TransformOrigin:
++      case StyleName.Effect.TransformStyle:
++      case StyleName.Effect.Visibility:
++      case StyleName.Effect.ZIndex:
++        formattedValue = StyleChecker.#GetEffectValue(fileName, propName, propValue);
++        break;
++      case StyleName.Text.Color:
++      case StyleName.Text.FontFamily:
++      case StyleName.Text.FontSize:
++      case StyleName.Text.FontStyle:
++      case StyleName.Text.FontWeight:
++      case StyleName.Text.LineHeight:
++      case StyleName.Text.TextAlign:
++      case StyleName.Text.TextShadow:
++      case StyleName.Text.TextOverflow:
++      case StyleName.Text.WebkitTextStroke:
++      case StyleName.Text.WhiteSpace:
++      case StyleName.Text.WordWrap:
++        formattedValue = StyleChecker.#GetTextValue(fileName, propName, propValue);
++        break;
++      case StyleName.Motion.Animation:
++      case StyleName.Motion.Transition:
++        formattedValue = StyleChecker.#GetMotionValue(fileName, propName, propValue);
++        break;
++      default:
++        // 返回未处理的值
++        console.warn("JsView Warn: Unimplemented style property [" + propName + "]");
++        break;
++    }
++
++    return formattedValue;
++  }
++
++  static GetFormattedKeyframe(fileName, propName, propValue) {
++    let removedPxSuffix = false;
++
++    // 去掉translate3d中的px单位
++    const valueArray = propValue.split('translate3d');
++    for (let idx = 1; idx < valueArray.length; idx++) {
++      let useFormated = false;
++      let translate3dValue = valueArray[idx].replace(/\).*/, ''); // 只保留value
++      translate3dValue = translate3dValue.replace(/.*\(/, ''); // 只保留value
++      const translate3dCoord = translate3dValue.split(',');
++      for (let coordIdx = 0; coordIdx < translate3dCoord.length; coordIdx++) {
++        const coordValue = translate3dCoord[coordIdx].trim();
++        if (coordValue.includes('px')) {
++          translate3dCoord[coordIdx] = coordValue.replace('px', '');
++          useFormated = true;
++        }
++      }
++
++      if (useFormated) { // 替换成去掉px的值
++        translate3dValue = translate3dCoord.join(',');
++        valueArray[idx] = valueArray[idx].replace(/\(.*?\)/, '(' + translate3dValue + ')');
++        removedPxSuffix = true;
++      }
++    }
++
++    if (removedPxSuffix) {
++      const msg = ` Auto optimize style keyframes ${propName},`
++                + ` remove unnecessary 'px' suffix.`;
++      Logger.Info(Logger.GetFileTag(fileName), msg);
++    }
++    const value = valueArray.join('translate3d');
++
++    return value;
++  }
++
++  static #GetLayoutValue(fileName, propName, propValue) {
++    const formattedValue = StyleChecker.#ConvertToInt32(fileName, propName, propValue);
++
++    return formattedValue;
++  }
++
++  static #GetBackgroundValue(fileName, propName, propValue) {
++    let formattedValue = null;
++    switch (propName) {
++      case StyleName.Background.BackgroundColor:
++        formattedValue = StyleChecker.#ConvertToColor(fileName, propName, propValue);
++        break;
++      case StyleName.Background.BorderRadius:
++        formattedValue = StyleFormator.ConvertToString(propName, propValue);
++        if (formattedValue.includes?.('px')) {
++          formattedValue = formattedValue.replace?.('px', ''); // 去掉px
++
++          const msg = ` Auto optimize style ${propName},`
++                    + ` remove unnecessary 'px'.`;
++          Logger.Info(Logger.GetFileTag(fileName), msg);
++        }
++        break;
++      default:
++        formattedValue = StyleFormator.ConvertToString(propName, propValue);
++        break;
++    }
++
++    return formattedValue;
++  }
++
++  static #GetEffectValue(fileName, propName, propValue) {
++    let formattedValue = null;
++    switch (propName) {
++      // case StyleName.Effect.Opacity:
++      //   formattedValue = StyleFormator.ConvertToFloat(propName, propValue);
++      //   break;
++      case StyleName.Effect.ZIndex:
++        formattedValue = StyleFormator.ConvertToInt32(propName, propValue);
++        break;
++      default:
++        formattedValue = StyleFormator.ConvertToString(propName, propValue);
++        break;
++    }
++
++    return formattedValue;
++  }
++
++  static #GetTextValue(fileName, propName, propValue) {
++    let formattedValue = null;
++    switch (propName) {
++      case StyleName.Text.Color:
++        formattedValue = StyleChecker.#ConvertToColor(fileName, propName, propValue);
++        break;
++      case StyleName.Text.FontSize:
++      case StyleName.Text.LineHeight:
++        formattedValue = StyleChecker.#ConvertToInt32(fileName, propName, propValue);
++        break;
++      default:
++        formattedValue = StyleFormator.ConvertToString(propName, propValue);
++        break;
++    }
++
++    return formattedValue;
++  }
++
++  static #GetMotionValue(fileName, propName, propValue) {
++    // 需要留到执行时处理
++    const formattedValue = StyleFormator.ConvertToString(propName, propValue);
++
++    return formattedValue;
++  }
++
++  static #ConvertToInt32(fileName, propName, propValue) {
++    if (propValue.is(StyleValue.DataType.String)) {
++      const strValue = propValue.get();
++      StyleFormator.StringTrim(strValue);
++      if (StyleFormator.StringEndsWith(strValue, "px")) {
++        const fmtValue = StyleFormator.StringToInt32(strValue);
++        const msg = ` Auto optimize style propery ${propName},`
++                  + ` convert value from string ${strValue} to number ${fmtValue}.`;
++        Logger.Info(Logger.GetFileTag(fileName), msg);
++        return fmtValue;
++      }
++    } 
++
++    return StyleFormator.ConvertToInt32(propName, propValue);
++  }
++
++  static #ConvertToColor(fileName, propName, propValue) {
++    const formattedValue = StyleFormator.ConvertToString(propName, propValue);
++    var colorRegex = new RegExp(/^(#([0-9A-Fa-f]{2}){3,4}|rgba?\([\d\s.,-]+\))$/);
++    if(!colorRegex.test(formattedValue)) {
++      const msg = ` style ${propName}: ${propValue} is Invalid.`
++      Logger.Warn(Logger.GetFileTag(fileName), msg);
++    }
++
++    return formattedValue;
++  }
++}
++
++module.exports = StyleChecker;
+
+diff --git a/node_modules/@vue/compiler-sfc/dist/jsview-style-formator.cjs.js b/node_modules/@vue/compiler-sfc/dist/jsview-style-formator.cjs.js
+new file mode 100644
+index 0000000..29ff2ad
+--- /dev/null
++++ b/node_modules/@vue/compiler-sfc/dist/jsview-style-formator.cjs.js
+@@ -0,0 +1,1211 @@
++'use strict';
++
++Object.defineProperty(exports, '__esModule', { value: true });
++
++var Forge = {};
++
++class ErrCode {
++    static ToString(value) {
++        switch (value) {
++            case ErrCode.UnknownError:
++                return 'UnknownError(' + value + ')';
++            case ErrCode.UnimplementedError:
++                return 'UnimplementedError(' + value + ')';
++            case ErrCode.UnsupportedError:
++                return 'UnsupportedError(' + value + ')';
++            case ErrCode.NotFoundError:
++                return 'NotFoundError(' + value + ')';
++            case ErrCode.InvalidArgument:
++                return 'InvalidArgument(' + value + ')';
++            case ErrCode.BadArgumentSize:
++                return 'BadArgumentSize(' + value + ')';
++            case ErrCode.InvalidElement:
++                return 'InvalidElement(' + value + ')';
++            case ErrCode.BadElementType:
++                return 'BadElementType(' + value + ')';
++            case ErrCode.CssStyleNotExists:
++                return 'CssStyleNotExists(' + value + ')';
++            case ErrCode.CssStyleNotChanged:
++                return 'CssStyleNotChanged(' + value + ')';
++            case ErrCode.CssStyleBadType:
++                return 'CssStyleBadType(' + value + ')';
++            case ErrCode.CssClassNotChanged:
++                return 'CssClassNotChanged(' + value + ')';
++            case ErrCode.ForgeInsertView:
++                return 'ForgeInsertView(' + value + ')';
++            default:
++                return ("UnknownError(" + value + ")");
++        }
++    }
++    static GetFormattedMethod(prettyFunction) {
++        var begin = 0, length = 0;
++        begin = prettyFunction.indexOf(" ") + 1;
++        length = prettyFunction.indexOf("(") - begin;
++        const method = prettyFunction.substr(begin, length) + "()";
++        return method;
++    }
++    static GetErrorMessage(errMsgs = []) {
++        var oss = "";
++        for (const item of errMsgs) {
++            oss += item;
++        }
++        return oss;
++    }
++    static PrintErrorMessage(fileName, fileLine, errMsgs = []) {
++        const msg = ErrCode.GetErrorMessage(errMsgs);
++        console.error("ForgeDom", "Error@ " + fileName + ":" + fileLine + ", " + msg);
++    }
++    static UnknownError = -1;
++    static UnimplementedError = -2;
++    static UnsupportedError = -3;
++    static NotFoundError = -4;
++    static InvalidArgument = -5;
++    static BadArgumentSize = -6;
++    static InvalidElement = -100;
++    static BadElementType = -101;
++    static BadTaskType = -102;
++    static CssStyleNotExists = -120;
++    static CssStyleNotChanged = -121;
++    static CssStyleBadName = -122;
++    static CssStyleBadType = -123;
++    static CssClassNotChanged = -124;
++    static ForgeInsertView = -200;
++    /*** private ***/
++    constructor() { throw new Error("new ErrCode() is forbidden."); }
++}
++function ASSERT_AND_RETPTR(condition, retPtr, errMsgs = []) {
++    ASSERT_AND_RETURN(condition, ErrCode.GetErrorMessage(errMsgs), retPtr);
++}
++function CHECK_AND_RETVAL(errCode, retVal, errMsgs = []) {
++    CHECK_AND_RETURN(errCode, ErrCode.GetErrorMessage(errMsgs), retVal);
++}
++function CHECK_AND_RETURN(errCode, errMsgs, ret = undefined) {
++    if ((errCode) < 0) {
++        ErrCode.PrintErrorMessage("__FILE_NAME__", "__LINE__", [
++            ErrCode.ToString(errCode), ". ",
++            errMsgs,
++        ]);
++        throw new Error(ret);
++    }
++}
++function ASSERT_AND_RETURN(condition, errMsgs, ret = undefined) {
++    if (!(condition)) {
++        ErrCode.PrintErrorMessage("__FILE_NAME__", "__LINE__", [
++            "ASSERT(" + condition + ")", ". ",
++            errMsgs,
++        ]);
++        throw new Error(ret);
++    }
++}
++
++class StyleName {
++    static Layout = class {
++        static Height = "height";
++        static Left = "left";
++        static Top = "top";
++        static Width = "width";
++        constructor() { throw new Error("new StyleName.Layout() is forbidden."); }
++    };
++    static Background = class {
++        static BackgroundColor = "backgroundColor";
++        static BackgroundImage = "backgroundImage";
++        static BorderRadius = "borderRadius";
++        constructor() { throw new Error("new StyleName.Background() is forbidden."); }
++    };
++    static Effect = class {
++        static BackfaceVisibility = "backfaceVisibility";
++        static BorderImage = "borderImage";
++        static BorderImageWidth = "borderImageWidth";
++        static BorderImageOutset = "borderImageOutset";
++        // static ClipPath: string = "clipPath";
++        static Display = "display";
++        static ObjectFit = "objectFit";
++        static Opacity = "opacity";
++        static Overflow = "overflow";
++        static Perspective = "perspective";
++        static PerspectiveOrigin = "perspectiveOrigin";
++        static Transform = "transform";
++        static TransformOrigin = "transformOrigin";
++        static TransformStyle = "transformStyle";
++        static Visibility = "visibility";
++        static ZIndex = "zIndex";
++        constructor() { throw new Error("new StyleName.Effect() is forbidden."); }
++    };
++    static Text = class {
++        static Color = "color";
++        static FontFamily = "fontFamily";
++        static FontSize = "fontSize";
++        static FontStyle = "fontStyle";
++        static FontWeight = "fontWeight";
++        static LineHeight = "lineHeight";
++        static TextAlign = "textAlign";
++        static TextOverflow = "textOverflow";
++        static TextShadow = "textShadow";
++        static WebkitTextStroke = "WebkitTextStroke";
++        static WhiteSpace = "whiteSpace";
++        static WordWrap = "wordWrap";
++        static Direction = "direction";
++        static JsvTextEmoji = "JsvTextEmoji";
++        static JsvTextLatex = "JsvTextLatex";
++        static JsvTextAlignMinWidth = "JsvTextAlignMinWidth";
++        static JsvTextVerticalAlign = "JsvTextVerticalAlign";
++        static JsvTextLineAlign = "JsvTextLineAlign";
++        static JsvTextInnerDirection = "JsvTextInnerDirection";
++        constructor() { throw new Error("new StyleName.Text() is forbidden."); }
++    };
++    static Motion = class {
++        static Animation = "animation";
++        static Transition = "transition";
++        static AnimationFillMode = "animationFillMode";
++        constructor() { throw new Error("new StyleName.Motion() is forbidden."); }
++    };
++    static HasGetterMethod(name) {
++        switch (name) {
++            case StyleName.Layout.Height:
++            case StyleName.Layout.Left:
++            case StyleName.Layout.Top:
++            case StyleName.Layout.Width:
++            case StyleName.Effect.ObjectFit:
++                return true;
++            default:
++                return false;
++        }
++    }
++    static ToConst(name) {
++        if (name == StyleName.Layout.Height) {
++            return StyleName.Layout.Height;
++        }
++        else if (name == StyleName.Layout.Left) {
++            return StyleName.Layout.Left;
++        }
++        else if (name == StyleName.Layout.Top) {
++            return StyleName.Layout.Top;
++        }
++        else if (name == StyleName.Layout.Width) {
++            return StyleName.Layout.Width;
++        }
++        else if (name == StyleName.Background.BackgroundColor) {
++            return StyleName.Background.BackgroundColor;
++        }
++        else if (name == StyleName.Background.BackgroundImage) {
++            return StyleName.Background.BackgroundImage;
++        }
++        else if (name == StyleName.Background.BorderRadius) {
++            return StyleName.Background.BorderRadius;
++        }
++        else if (name == StyleName.Effect.BackfaceVisibility) {
++            return StyleName.Effect.BackfaceVisibility;
++        }
++        else if (name == StyleName.Effect.BorderImage) {
++            return StyleName.Effect.BorderImage;
++        }
++        else if (name == StyleName.Effect.BorderImageWidth) {
++            return StyleName.Effect.BorderImageWidth;
++        }
++        else if (name == StyleName.Effect.BorderImageOutset) {
++            return StyleName.Effect.BorderImageOutset;
++        }
++        // else if (name == StyleName.Effect.ClipPath) { return StyleName.Effect.ClipPath; }
++        else if (name == StyleName.Effect.Display) {
++            return StyleName.Effect.Display;
++        }
++        else if (name == StyleName.Effect.ObjectFit) {
++            return StyleName.Effect.ObjectFit;
++        }
++        else if (name == StyleName.Effect.Opacity) {
++            return StyleName.Effect.Opacity;
++        }
++        else if (name == StyleName.Effect.Overflow) {
++            return StyleName.Effect.Overflow;
++        }
++        else if (name == StyleName.Effect.Perspective) {
++            return StyleName.Effect.Perspective;
++        }
++        else if (name == StyleName.Effect.PerspectiveOrigin) {
++            return StyleName.Effect.PerspectiveOrigin;
++        }
++        else if (name == StyleName.Effect.Transform) {
++            return StyleName.Effect.Transform;
++        }
++        else if (name == StyleName.Effect.TransformOrigin) {
++            return StyleName.Effect.TransformOrigin;
++        }
++        else if (name == StyleName.Effect.TransformStyle) {
++            return StyleName.Effect.TransformStyle;
++        }
++        else if (name == StyleName.Effect.Visibility) {
++            return StyleName.Effect.Visibility;
++        }
++        else if (name == StyleName.Effect.ZIndex) {
++            return StyleName.Effect.ZIndex;
++        }
++        else if (name == StyleName.Text.Color) {
++            return StyleName.Text.Color;
++        }
++        else if (name == StyleName.Text.FontFamily) {
++            return StyleName.Text.FontFamily;
++        }
++        else if (name == StyleName.Text.FontSize) {
++            return StyleName.Text.FontSize;
++        }
++        else if (name == StyleName.Text.FontStyle) {
++            return StyleName.Text.FontStyle;
++        }
++        else if (name == StyleName.Text.FontWeight) {
++            return StyleName.Text.FontWeight;
++        }
++        else if (name == StyleName.Text.LineHeight) {
++            return StyleName.Text.LineHeight;
++        }
++        else if (name == StyleName.Text.TextAlign) {
++            return StyleName.Text.TextAlign;
++        }
++        else if (name == StyleName.Text.TextOverflow) {
++            return StyleName.Text.TextOverflow;
++        }
++        else if (name == StyleName.Text.TextShadow) {
++            return StyleName.Text.TextShadow;
++        }
++        else if (name == StyleName.Text.WebkitTextStroke) {
++            return StyleName.Text.WebkitTextStroke;
++        }
++        else if (name == StyleName.Text.WhiteSpace) {
++            return StyleName.Text.WhiteSpace;
++        }
++        else if (name == StyleName.Text.WordWrap) {
++            return StyleName.Text.WordWrap;
++        }
++        else if (name == StyleName.Text.Direction) {
++            return StyleName.Text.Direction;
++        }
++        else if (name == StyleName.Text.JsvTextEmoji) {
++            return StyleName.Text.JsvTextEmoji;
++        }
++        else if (name == StyleName.Text.JsvTextLatex) {
++            return StyleName.Text.JsvTextLatex;
++        }
++        else if (name == StyleName.Text.JsvTextAlignMinWidth) {
++            return StyleName.Text.JsvTextAlignMinWidth;
++        }
++        else if (name == StyleName.Text.JsvTextVerticalAlign) {
++            return StyleName.Text.JsvTextVerticalAlign;
++        }
++        else if (name == StyleName.Text.JsvTextLineAlign) {
++            return StyleName.Text.JsvTextLineAlign;
++        }
++        else if (name == StyleName.Text.JsvTextInnerDirection) {
++            return StyleName.Text.JsvTextInnerDirection;
++        }
++        else if (name == StyleName.Motion.Animation) {
++            return StyleName.Motion.Animation;
++        }
++        else if (name == StyleName.Motion.Transition) {
++            return StyleName.Motion.Transition;
++        }
++        else if (name == StyleName.Motion.AnimationFillMode) {
++            return StyleName.Motion.AnimationFillMode;
++        }
++        return null;
++    }
++    constructor() { throw new Error("new StyleName() is forbidden."); }
++}
++class StyleValue {
++    static Base = class {
++        constructor(rawValue) {
++            this.rawValue = rawValue;
++        }
++        rawValue;
++    };
++    static AnimationImpl = class extends StyleValue.Base {
++        constructor(rawValue) {
++            super(rawValue);
++        }
++        name = "";
++        duration = 0;
++        timingFunction = null;
++        delay = 0;
++        iterationCount = 0;
++        direction = false;
++    };
++    static CornerImpl = class extends StyleValue.Base {
++        constructor(rawValue) {
++            super(rawValue);
++        }
++        topLeft = 0;
++        topRight = 0;
++        bottomRight = 0;
++        bottomLeft = 0;
++    };
++    static RectImpl = class extends StyleValue.Base {
++        constructor(rawValue) {
++            super(rawValue);
++        }
++        top = 0;
++        right = 0;
++        left = 0;
++        bottom = 0;
++    };
++    static TextShadowImpl = class extends StyleValue.Base {
++        constructor(rawValue) {
++            super(rawValue);
++        }
++        hShadow = 0;
++        vShadow = 0;
++        blur = 0;
++        color = undefined;
++    };
++    static WebkitTextStrokeImpl = class extends StyleValue.Base {
++        constructor(rawValue) {
++            super(rawValue);
++        }
++        length = 0;
++        color = undefined;
++    };
++    static TransitionImpl = class extends StyleValue.Base {
++        constructor(rawValue) {
++            super(rawValue);
++        }
++        animationMap = new Map();
++    };
++    static BorderImageImpl = class extends StyleValue.Base {
++        constructor(rawValue) {
++            super(rawValue);
++        }
++        source = "";
++        slice = null;
++    };
++    static BackgroundImageImpl = class extends StyleValue.Base {
++        constructor(rawValue) {
++            super(rawValue);
++        }
++        type = 0;
++        static eType = {
++            UNKNOWN: 0,
++            LINEAR_GRADIENT: 1,
++            URL_PATH: 2,
++        };
++        static LinearGradient = class {
++            fromX = 0;
++            fromY = 0;
++            toX = 0;
++            toY = 0;
++            stops = []; // std::vector<ForgeFront::LinearGradientTexture::StopPoint>
++        };
++        linearGradient; // LinearGradient
++        urlPath = ""; // Image url type
++    };
++    static DataType = class {
++        static Null = 0;
++        static Int32 = 1;
++        static Float = 2;
++        static String = 3;
++        static Animation = 4;
++        static Corner = 5;
++        static Rect = 6;
++        static TextShadow = 7;
++        static WebkitTextStroke = 8;
++        static Transition = 9;
++        static BorderImage = 10;
++        static BackgroundImage = 11;
++    };
++    static InvalidInt32 = Number.MIN_VALUE;
++    static InvalidFloat = Number.NaN;
++    static InvalidPointer = null;
++    constructor(data) {
++        let index = -1;
++        let value = null;
++        if (data == null) {
++            index = StyleValue.DataType.Null;
++        }
++        else if (Number(data) === data && data % 1 === 0) {
++            index = StyleValue.DataType.Int32;
++        }
++        else if (Number(data) === data && data % 1 !== 0) {
++            index = StyleValue.DataType.Float;
++        }
++        else if (typeof data === 'string' || data instanceof String) {
++            index = StyleValue.DataType.String;
++        }
++        else if (data instanceof StyleValue.AnimationImpl) {
++            index = StyleValue.DataType.Animation;
++        }
++        else if (data instanceof StyleValue.CornerImpl) {
++            index = StyleValue.DataType.Corner;
++        }
++        else if (data instanceof StyleValue.RectImpl) {
++            index = StyleValue.DataType.Rect;
++        }
++        else if (data instanceof StyleValue.TextShadowImpl) {
++            index = StyleValue.DataType.TextShadow;
++        }
++        else if (data instanceof StyleValue.WebkitTextStrokeImpl) {
++            index = StyleValue.DataType.WebkitTextStroke;
++        }
++        else if (data instanceof StyleValue.TransitionImpl) {
++            index = StyleValue.DataType.Transition;
++        }
++        else if (data instanceof StyleValue.BorderImageImpl) {
++            index = StyleValue.DataType.BorderImage;
++        }
++        if (data != StyleValue.InvalidInt32
++            && data != StyleValue.InvalidFloat
++            && data != StyleValue.InvalidPointer) {
++            value = data;
++        }
++        else {
++            index = StyleValue.DataType.Null;
++            value = null;
++        }
++        this.data = new StyleValue.DataInfo();
++        this.data.index = index;
++        this.data.value = value;
++    }
++    toString() {
++        let result = null;
++        switch (this.data.index) {
++            case StyleValue.DataType.Null:
++                return "";
++            case StyleValue.DataType.Int32:
++                return String(this.get());
++            case StyleValue.DataType.Float:
++                return String(this.get());
++            case StyleValue.DataType.String:
++                result = this.get();
++                break;
++            case StyleValue.DataType.Animation:
++                result = this.get().rawValue;
++                break;
++            case StyleValue.DataType.Corner:
++                result = this.get().rawValue;
++                break;
++            case StyleValue.DataType.Rect:
++                result = this.get().rawValue;
++                break;
++            case StyleValue.DataType.TextShadow:
++                result = this.get().rawValue;
++                break;
++            case StyleValue.DataType.WebkitTextStroke:
++                result = this.get().rawValue;
++                break;
++            case StyleValue.DataType.Transition:
++                result = this.get().rawValue;
++                break;
++            case StyleValue.DataType.BorderImage:
++                result = this.get().rawValue;
++                break;
++            case StyleValue.DataType.BackgroundImage:
++                result = this.get().rawValue;
++                break;
++            default:
++                console.error("Failed to do StyleValue.toString()");
++                break;
++        }
++        return result ?? "";
++    }
++    is(type) {
++        return this.data.index == type;
++    }
++    get() {
++        return this.data.value;
++    }
++    reset(rhs) {
++        this.data.value = rhs.data.value;
++        this.data.index = rhs.data.index;
++    }
++    equals(rhs) {
++        return (this.data.value === rhs.data.value
++            && this.data.index === rhs.data.index);
++    }
++    static DataInfo = class {
++        value = null;
++        index = -1;
++    };
++    data;
++}
++class StyleVariable {
++    static FormatVariableName(varName) {
++        if (varName.startsWith('--')) {
++            return 'var(' + varName + ')'; // var(--xxx)
++        }
++        else if (varName.startsWith('var(--')) {
++            return varName;
++        }
++        ASSERT_AND_RETPTR(false, null);
++        return null;
++    }
++    static IsVariable(value) {
++        let variable;
++        if (value instanceof StyleValue) {
++            if (value.is(StyleValue.DataType.String) == false) {
++                return false;
++            }
++            variable = value.get();
++        }
++        else if (typeof value === 'string') {
++            variable = value;
++        }
++        else {
++            return false;
++        }
++        const isVar = (variable.startsWith("--") || variable.startsWith("var(--"));
++        return isVar;
++    }
++    constructor() { throw new Error("new StyleVariable() is forbidden."); }
++}
++
++let ForgeFront = Forge;
++class StyleFormator {
++    /*** public ***/
++    static StringToInt32(value) {
++        let ret = StyleValue.InvalidInt32;
++        let int32Value = parseInt(value);
++        if (isNaN(int32Value) == false) {
++            ret = int32Value;
++        }
++        return ret;
++    }
++    static StringTrim(value) {
++        return value.trim();
++    }
++    static StringStartsWith(value, starting) {
++        return value.startsWith(starting);
++    }
++    static StringEndsWith(value, ending) {
++        return value.endsWith(ending);
++    }
++    static StringSplit(from, delimiter = " ", startIdx = 0, endIdx = 0, doTrim = false) {
++        if (!from) {
++            from = "";
++        }
++        // apply startIdx/endIdx
++        if (endIdx == 0) {
++            // 0代表全字符
++            endIdx = from.length - 1;
++        }
++        from = from.substring(startIdx, endIdx + 1);
++        let arrays = from.trim().split(delimiter);
++        // 去除多个空格的条件下的影响
++        // 结果string进行trim
++        let ret = [];
++        for (let item of arrays) {
++            if (!item) {
++                continue;
++            }
++            if (doTrim) {
++                item = item.trim();
++                if (item.length == 0) {
++                    continue;
++                }
++            }
++            ret.push(item);
++        }
++        return ret;
++    }
++    static MergeBrackets(input, connector = null) {
++        let output = [];
++        let packString = "";
++        let notMergedPrevious = null;
++        let mergedString = null;
++        let bracket_depth = 0;
++        let useSstream = false;
++        for (let str of input) {
++            let start_pos = 0;
++            while (start_pos < str.length) {
++                if (bracket_depth > 0) {
++                    let end_pos = str.indexOf(")", start_pos);
++                    let next_bracket_pos = str.indexOf("(", start_pos);
++                    if (next_bracket_pos != -1 && (end_pos == -1 || next_bracket_pos < end_pos)) {
++                        bracket_depth++;
++                        start_pos = next_bracket_pos + 1;
++                    }
++                    else {
++                        // 到目前为止没有深度增加
++                        // 可能1: 有新正括号，但晚于反括号
++                        // 可能2: 无新正括号，有反括号
++                        // 可能3: 无新正括号，也无反括号
++                        if (end_pos >= 0) {
++                            // 上诉的可能1或可能2
++                            bracket_depth--;
++                            // 以反括号为节点继续后查
++                            // 在新正括号在反括号之后的场景放到下一次循环来处理
++                            start_pos = end_pos + 1;
++                        }
++                        else {
++                            // 上诉的可能3
++                            // 不需要后续的检查,保存depth状态,跳到下一个内容
++                            break;
++                        }
++                    }
++                }
++                else {
++                    let bracket_pos = str.indexOf("(", start_pos);
++                    if (bracket_pos == -1) {
++                        break;
++                    }
++                    bracket_depth++;
++                    start_pos = bracket_pos + 1;
++                }
++            }
++            // 执行本次合并
++            if (useSstream) {
++                // 第三个及以上合并内容
++                if (connector) {
++                    packString += connector;
++                }
++                packString += str;
++            }
++            else if (notMergedPrevious != null) {
++                // 第二个合并内容
++                packString += notMergedPrevious;
++                if (connector) {
++                    packString += connector;
++                }
++                packString += str;
++                notMergedPrevious = null;
++                useSstream = true;
++            }
++            else {
++                // 第一个合并内容
++                notMergedPrevious = str; // 记录previousString
++            }
++            if (bracket_depth == 0) {
++                // 收尾
++                if (useSstream) {
++                    mergedString = packString;
++                    packString = "";
++                }
++                else {
++                    mergedString = str;
++                }
++                output.push(mergedString);
++                // 重置所有状态
++                notMergedPrevious = null;
++                useSstream = false;
++            }
++        }
++        return output;
++    }
++    static ConvertToInt32(name, value) {
++        if (value.is(StyleValue.DataType.Null)) {
++            return 0;
++        }
++        else if (value.is(StyleValue.DataType.String)) {
++            const strValue = value.get();
++            if (strValue === "") {
++                return 0;
++            }
++            else {
++                StyleFormator.StringTrim(strValue);
++                if (StyleFormator.StringEndsWith(strValue, "px")) {
++                    const msg = 'JsView Warning:'
++                        + ' Using px will make style performance lower,'
++                        + ' you can directly use numbers instead of "' + strValue + '".';
++                    console.warn(msg);
++                }
++                return StyleFormator.StringToInt32(strValue);
++            }
++        }
++        else if (value.is(StyleValue.DataType.Int32)) {
++            return value.get();
++        }
++        else if (value.is(StyleValue.DataType.Float)) {
++            return value.get();
++        }
++        CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidInt32, [
++            'Failed to convert style ',
++            name, '=', value.toString(),
++            ', value type is supported.'
++        ]);
++        return StyleValue.InvalidInt32;
++    }
++    static ConvertToFloat(name, value) {
++        if (value.is(StyleValue.DataType.Null)) {
++            return StyleValue.InvalidFloat;
++        }
++        else if (value.is(StyleValue.DataType.String) && value.get() === "") {
++            return 0;
++        }
++        else if (value.is(StyleValue.DataType.Int32)) {
++            return value.get();
++        }
++        else if (value.is(StyleValue.DataType.Float)) {
++            return value.get();
++        }
++        CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidFloat, [
++            "Failed to convert style ",
++            name, '=', value.toString(),
++            ", value type is supported."
++        ]);
++        return StyleValue.InvalidFloat;
++    }
++    static ConvertToString(name, value, upperCase = false) {
++        if (value.is(StyleValue.DataType.Null)) {
++            return StyleValue.InvalidPointer;
++        }
++        if (value.is(StyleValue.DataType.String) == false) {
++            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer, [
++                "Failed to convert style ",
++                name, '=', value.toString(),
++                ", type is not string."
++            ]);
++        }
++        let propValue = value.get();
++        if (propValue == null || propValue.length <= 0) {
++            return StyleValue.InvalidPointer;
++        }
++        if (upperCase) {
++            propValue = propValue.toUpperCase();
++        }
++        return propValue;
++    }
++    static ConvertToCorner(name, value) {
++        if (value.is(StyleValue.DataType.Null)) {
++            return StyleValue.InvalidPointer;
++        }
++        let corner = null;
++        if (value.is(StyleValue.DataType.Int32)) {
++            const propValue = value.get();
++            corner = new StyleValue.CornerImpl(String(propValue));
++            corner.topLeft = propValue;
++            corner.topRight = propValue;
++            corner.bottomRight = propValue;
++            corner.bottomLeft = propValue;
++        }
++        else if (value.is(StyleValue.DataType.String)) {
++            const propValue = value.get();
++            if (propValue == null || propValue.length <= 0) {
++                return StyleValue.InvalidPointer;
++            }
++            const propValueArray = StyleFormator.StringSplit(propValue);
++            const propValueSize = propValueArray.length;
++            corner = new StyleValue.CornerImpl(propValue);
++            corner.topLeft = (propValueSize > 0 ? parseInt(propValueArray[0]) : 0);
++            corner.topRight = (propValueSize > 1 ? parseInt(propValueArray[1]) : corner.topLeft);
++            corner.bottomRight = (propValueSize > 2 ? parseInt(propValueArray[2]) : corner.topLeft);
++            corner.bottomLeft = (propValueSize > 3 ? parseInt(propValueArray[3]) : corner.bottomRight);
++        }
++        else {
++            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer, [
++                "Failed to convert style ",
++                name, '=', value.toString(),
++                ", type is not number or string."
++            ]);
++        }
++        return corner;
++    }
++    static ConvertToRect(name, value) {
++        if (value.is(StyleValue.DataType.Null)) {
++            return StyleValue.InvalidPointer;
++        }
++        if (value.is(StyleValue.DataType.String) == false) {
++            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer, ['Failed to convert style ' + name + '=' + value + ', value type is not string.']);
++        }
++        const propValue = value.get();
++        if (propValue == null || propValue.length <= 0) {
++            return StyleValue.InvalidPointer;
++        }
++        const rect = new StyleValue.RectImpl(propValue);
++        const propValueArray = StyleFormator.StringSplit(propValue);
++        const propValueSize = propValueArray.length;
++        rect.top = (propValueSize > 0 ? parseInt(propValueArray[0]) : 0);
++        rect.right = (propValueSize > 1 ? parseInt(propValueArray[1]) : rect.top);
++        rect.bottom = (propValueSize > 2 ? parseInt(propValueArray[2]) : rect.top);
++        rect.left = (propValueSize > 3 ? parseInt(propValueArray[3]) : rect.right);
++        return rect;
++    }
++    static ConvertToAnimation(name, value, compare = null) {
++        if (value.is(StyleValue.DataType.Null)) {
++            return StyleValue.InvalidPointer;
++        }
++        if (value.is(StyleValue.DataType.String) == false) {
++            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer, [
++                "Failed to convert style ",
++                name, '=', value.toString(),
++                ", type is not string."
++            ]);
++        }
++        const propValue = value.get();
++        if (propValue == null || propValue.length <= 0) {
++            return StyleValue.InvalidPointer;
++        }
++        // 和compare相同，直接返回compare加速
++        if (compare != null && compare.rawValue != null
++            && compare.rawValue == propValue) {
++            return compare;
++        }
++        const anim = StyleFormator.ParseToAnimation(propValue);
++        return anim;
++    }
++    static ConvertToTransition(name, value, compare = null) {
++        if (value.is(StyleValue.DataType.Null)) {
++            return StyleValue.InvalidPointer;
++        }
++        if (value.is(StyleValue.DataType.String) == false) {
++            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer, [
++                "Failed to convert style ",
++                name, '=', value.toString(),
++                ", type is not string."
++            ]);
++        }
++        const propValue = value.get();
++        if (propValue == null || propValue.length <= 0) {
++            return StyleValue.InvalidPointer;
++        }
++        // 和compare相同，直接返回compare加速
++        if (compare != null && compare.rawValue != null
++            && compare.rawValue == propValue) {
++            return compare;
++        }
++        let arrays = [];
++        const splitStr = StyleFormator.StringSplit(propValue, ",");
++        // 如果包含"(", 则将直到")"为止的内容当作一个部分
++        for (let idx = 0; idx < splitStr.length; idx++) {
++            if (splitStr[idx].indexOf('(') >= 0) {
++                let endIdx = idx;
++                while (endIdx < splitStr.length && splitStr[endIdx].indexOf(')') < 0) { // 没有包含")"
++                    endIdx++;
++                }
++                let concatStr = "";
++                for (let subIdx = idx; subIdx <= endIdx; subIdx++) {
++                    if (subIdx != idx) {
++                        concatStr += ",";
++                    }
++                    concatStr += splitStr[subIdx];
++                }
++                idx = endIdx;
++                arrays.push(concatStr);
++            }
++            else {
++                arrays.push(splitStr[idx]);
++            }
++        }
++        // console.warn("StyleFormator.ConvertToTransition() arrays=" + JSON.stringify(arrays));
++        const transition = new StyleValue.TransitionImpl(propValue);
++        for (const item of arrays) {
++            const ret = StyleFormator.ConvertToAnimation(name, new StyleValue(item));
++            if (ret == null) {
++                continue;
++            }
++            transition.animationMap.set(ret.name, ret);
++            if (ret?.name == "all") {
++                const allProps = ["opacity", "left", "top", "width", "height", "transform"];
++                for (const prop of allProps) {
++                    transition.animationMap.set(prop, ret);
++                }
++            }
++        }
++        return transition;
++    }
++    static ConvertToTextShadow(name, value) {
++        if (value.is(StyleValue.DataType.Null)) {
++            return StyleValue.InvalidPointer;
++        }
++        if (value.is(StyleValue.DataType.String) == false) {
++            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer, [
++                "Failed to convert style ",
++                name, '=', value.toString(),
++                ", type is not string."
++            ]);
++        }
++        const propValue = value.get();
++        if (propValue == null || propValue.length <= 0) {
++            return StyleValue.InvalidPointer;
++        }
++        const textShadow = new StyleValue.TextShadowImpl(propValue);
++        const textShadowArray = StyleFormator.StringSplit(propValue);
++        if (textShadowArray.length > 0) {
++            textShadow.hShadow = parseInt(textShadowArray[0]);
++        }
++        if (textShadowArray.length > 1) {
++            textShadow.vShadow = parseInt(textShadowArray[1]);
++        }
++        if (textShadowArray.length > 2) {
++            textShadow.blur = parseInt(textShadowArray[2]);
++        }
++        let colorIndex = -1;
++        if (textShadowArray.length == 3) {
++            colorIndex = 2;
++        }
++        else if (textShadowArray.length > 3) {
++            colorIndex = 3;
++        }
++        if (colorIndex > 0) {
++            textShadow.color = textShadowArray[colorIndex];
++        }
++        return textShadow;
++    }
++    static ConvertToWebkitTextStroke(name, value) {
++        if (value.is(StyleValue.DataType.Null)) {
++            return StyleValue.InvalidPointer;
++        }
++        if (value.is(StyleValue.DataType.String) == false) {
++            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer, [
++                "Failed to convert style ",
++                name, '=', value.toString(),
++                ", type is not string."
++            ]);
++        }
++        const propValue = value.get();
++        if (propValue == null || propValue.length <= 0) {
++            return StyleValue.InvalidPointer;
++        }
++        const webkitTextStroke = new StyleValue.WebkitTextStrokeImpl(propValue);
++        const webkitTextStrokeArray = StyleFormator.StringSplit(propValue);
++        if (webkitTextStrokeArray.length > 0) {
++            webkitTextStroke.length = parseInt(webkitTextStrokeArray[0]);
++        }
++        if (webkitTextStrokeArray.length > 1) {
++            webkitTextStroke.color = webkitTextStrokeArray[1];
++        }
++        return webkitTextStroke;
++    }
++    static ConvertToBorderImage(name, value) {
++        if (value.is(StyleValue.DataType.Null)) {
++            return StyleValue.InvalidPointer;
++        }
++        if (value.is(StyleValue.DataType.String) == false) {
++            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer, [
++                "Failed to convert style ",
++                name, '=', value.toString(),
++                ", type is not string."
++            ]);
++        }
++        const propValue = value.get();
++        if (propValue == null || propValue.length <= 0) {
++            return StyleValue.InvalidPointer;
++        }
++        const borderImage = new StyleValue.BorderImageImpl(propValue);
++        const propValueArray = StyleFormator.StringSplit(propValue);
++        const propValueSize = propValueArray.length;
++        if (propValueSize > 0) {
++            borderImage.source = propValueArray[0];
++        }
++        if (propValueSize > 1) {
++            borderImage.slice = StyleFormator.ConvertToRect(name, new StyleValue(propValueArray[1]));
++        }
++        return borderImage;
++    }
++    static ConvertToBackgroundImage(name, value) {
++        if (value.is(StyleValue.DataType.Null)) {
++            return StyleValue.InvalidPointer;
++        }
++        if (value.is(StyleValue.DataType.String) == false) {
++            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer, [
++                "Failed to convert style ",
++                name, '=', value.toString(),
++                ", type is not string."
++            ]);
++        }
++        let propValue = value.get();
++        if (propValue == null || propValue.length <= 0) {
++            return StyleValue.InvalidPointer;
++        }
++        const backgroundImage = new StyleValue.BackgroundImageImpl(propValue);
++        const gradientPrefix = "linear-gradient(";
++        if (propValue.indexOf(gradientPrefix) == 0) {
++            propValue = StyleFormator.StringTrim(propValue);
++            backgroundImage.type = StyleValue.BackgroundImageImpl.eType.LINEAR_GRADIENT;
++            backgroundImage.linearGradient = new StyleValue.BackgroundImageImpl.LinearGradient();
++            backgroundImage.urlPath = propValue;
++            let propValueArray = StyleFormator.StringSplit(propValue, ",", gradientPrefix.length, propValue.length - 2 /* 去掉最后的括号 */);
++            propValueArray = StyleFormator.MergeBrackets(propValueArray, ",");
++            let propValueSize = propValueArray.length;
++            if (propValueSize > 0) {
++                // check direction
++                let firstDefine = propValueArray[0];
++                if (firstDefine.indexOf("to ") != -1) {
++                    propValueArray.splice(0, 1); // 删除头结点
++                    let stopsCount = propValueArray.length;
++                    if (firstDefine.indexOf("left") != -1) {
++                        // 向左
++                        backgroundImage.linearGradient.fromX = stopsCount + 1;
++                        backgroundImage.linearGradient.toX = 0;
++                    }
++                    else if (firstDefine.indexOf("right") != -1) {
++                        // 向右
++                        backgroundImage.linearGradient.fromX = 0;
++                        backgroundImage.linearGradient.toX = stopsCount + 1;
++                    }
++                    else {
++                        // X上无方向
++                        backgroundImage.linearGradient.fromX = 0;
++                        backgroundImage.linearGradient.toX = 0;
++                    }
++                    if (firstDefine.indexOf("top") != -1) {
++                        // 向上
++                        backgroundImage.linearGradient.fromY = stopsCount + 1;
++                        backgroundImage.linearGradient.toY = 0;
++                    }
++                    else if (firstDefine.indexOf("bottom") != -1) {
++                        // 向下
++                        backgroundImage.linearGradient.fromY = 0;
++                        backgroundImage.linearGradient.toY = stopsCount + 1;
++                    }
++                    else {
++                        // Y上无方向
++                        backgroundImage.linearGradient.fromY = 0;
++                        backgroundImage.linearGradient.toY = 0;
++                    }
++                }
++                else {
++                    // 默认从上到下
++                    backgroundImage.linearGradient.fromX = 0;
++                    backgroundImage.linearGradient.toX = 0;
++                    backgroundImage.linearGradient.fromY = 0;
++                    backgroundImage.linearGradient.toY = 2;
++                }
++            }
++            if (propValueSize < 2) {
++                // stops 颜色值不足，至少应该有起始和结束两种颜色
++                console.error(`linear gradient format error: str=${value}`);
++                return null;
++            }
++            let stepGap = 1 / propValueArray.length;
++            let stopsCount = propValueArray.length;
++            for (let i = 0; i < stopsCount; i++) {
++                let stopColor = propValueArray[i];
++                stopColor = StyleFormator.StringTrim(stopColor);
++                let stopPoint = new ForgeFront.LinearGradientTexture.StopPoint();
++                stopPoint.color = stopColor;
++                stopPoint.stopPosition = (i != stopsCount - 1 ? i * stepGap : 1);
++                backgroundImage.linearGradient.stops.push(stopPoint);
++            }
++        }
++        else {
++            // Url path形式
++            backgroundImage.type = StyleValue.BackgroundImageImpl.eType.URL_PATH;
++            backgroundImage.urlPath = propValue;
++        }
++        return backgroundImage;
++    }
++    static ParseToAnimation(value) {
++        const trimmed = StyleFormator.StringTrim(value);
++        let arrays = [];
++        const bezierStart = trimmed.indexOf("cubic-bezier");
++        if (bezierStart >= 0) { // 防止贝塞尔里面的空格被拆分
++            const bezierEnd = trimmed.indexOf(')');
++            const bezierStr = trimmed.substring(bezierStart, bezierEnd - 1);
++            const bezierArray = StyleFormator.StringSplit(trimmed, bezierStr);
++            for (const item of bezierArray) {
++                const subArrays = StyleFormator.StringSplit(item);
++                arrays = [...arrays, ...subArrays];
++            }
++            arrays.push(bezierStr);
++        }
++        else {
++            arrays = StyleFormator.StringSplit(trimmed);
++        }
++        // 下面四个属性在animation字符串中是无序的，所以需要单独判断。
++        let timingFunction = "";
++        let delay = 0;
++        let iterationCount = 1;
++        let direction = (trimmed.indexOf("alternate") >= 0);
++        for (var idx = 2; idx < arrays.length; idx++) { // 前两个选项固定是name和duration
++            if (arrays[idx] == "infinite") {
++                iterationCount = -1; // -1表示无限循环
++                continue;
++            }
++            let num = StyleFormator.ParseToTimeMs(arrays[idx]);
++            if (isNaN(num) == false) { // 表示时间
++                delay = num;
++            }
++            else {
++                num = StyleFormator.ParseToFloat(arrays[idx]);
++                if (isNaN(num) == false) { // 表示次数
++                    iterationCount = num;
++                }
++                else { // 不是数字，直接赋给timingFunction，省略判断
++                    timingFunction = arrays[idx];
++                }
++            }
++        }
++        const duration = arrays.length > 1 ? StyleFormator.ParseToTimeMs(arrays[1]) : 0.0;
++        const anim = new StyleValue.AnimationImpl(trimmed);
++        anim.name = arrays.length > 0 ? arrays[0] : "";
++        anim.duration = duration;
++        anim.timingFunction = StyleFormator.ParseToEasing(timingFunction, duration);
++        anim.delay = delay;
++        anim.iterationCount = iterationCount;
++        anim.direction = direction;
++        //        .originStr      = propValue,
++        return anim;
++    }
++    static ParseToTimeMs(from) {
++        if (StyleFormator.StringEndsWith(from, "s") == false) { // ms / s
++            return NaN;
++        }
++        let timing = StyleFormator.ParseToFloat(from);
++        if (StyleFormator.StringEndsWith(from, "ms")) {
++            timing *= 1.0;
++        }
++        else if (StyleFormator.StringEndsWith(from, "s")) {
++            timing *= 1000.0;
++        }
++        //    timing *= std::stof(from);
++        return timing;
++    }
++    static ParseToFloat(from) {
++        const trimmed = StyleFormator.StringTrim(from);
++        return parseFloat(trimmed);
++    }
++    static ParseToEasing(from, duration) {
++        let easing = null;
++        if (from.indexOf("ease") >= 0) {
++            if (from.indexOf("-in-out") >= 0) {
++                easing = Forge.Easing.Circular.InOut;
++            }
++            else if (from.indexOf("-out") >= 0) {
++                easing = Forge.Easing.Circular.Out;
++            }
++            else if (from.indexOf("-in") >= 0) {
++                easing = Forge.Easing.Circular.In;
++            }
++            else {
++                easing = Forge.Easing.Circular.InOut;
++            }
++        }
++        else if (from.indexOf("linear") >= 0) {
++            easing = null; // null是匀速动画
++        }
++        else if (from.indexOf("cubic-bezier") >= 0) {
++            easing = StyleFormator.ParseToEasingBezier(from, duration);
++        }
++        else if (from.indexOf("steps") >= 0) {
++            easing = StyleFormator.ParseToEasingSteps(from);
++        }
++        return easing;
++    }
++    static ParseToEasingBezier(jsDescribe, duration) {
++        let startIdx = jsDescribe.indexOf('(');
++        if (startIdx >= 0) {
++            jsDescribe = jsDescribe.substring(startIdx + 1);
++        }
++        let arrays = StyleFormator.StringSplit(jsDescribe, ',');
++        let bezier = {
++            x1: arrays.length > 0 ? parseFloat(arrays[0]) : 0,
++            y1: arrays.length > 1 ? parseFloat(arrays[1]) : 0,
++            x2: arrays.length > 2 ? parseFloat(arrays[2]) : 0,
++            y2: arrays.length > 3 ? parseFloat(arrays[3]) : 0,
++        };
++        return new Forge.BezierEasing(bezier.x1, bezier.y1, bezier.x2, bezier.y2, duration);
++    }
++    static ParseToEasingSteps(jsDescribe) {
++        let startIdx = jsDescribe.indexOf('(');
++        if (startIdx >= 0) {
++            jsDescribe = jsDescribe.substring(startIdx + 1);
++        }
++        let arrays = StyleFormator.StringSplit(jsDescribe, ',');
++        let steps = {
++            steps: arrays.length > 0 ? parseInt(arrays[0]) : 1,
++            type: arrays.length > 1 ? (arrays[1].includes("start") ? 0 : 1) : 0,
++        };
++        return new Forge.StepsEasing(steps.steps, steps.type);
++    }
++    constructor() { throw new Error("new StyleGroup() is forbidden."); }
++}
++
++exports.StyleFormator = StyleFormator;
++exports.StyleName = StyleName;
++exports.StyleValue = StyleValue;
++exports.StyleVariable = StyleVariable;
++//# sourceMappingURL=jsview-style-formator.cjs.js.map