@viewfly/scoped-css 0.0.1-alpha.8 → 0.0.1

package/README.md

@@ -1,4 +1,39 @@
 Viewfly
 ================================
 
-Viewfly 是一个简单、数据驱动的前端视图库，完整文档请参考官方网站：[viewfly.org](https://viewfly.org)
+Viewfly 是一个简单、数据驱动的前端框架。此项目为 Viewfly 组件提供了 css 模块化的能力。
+
+要使用 css 模块化能力，还需要在 webpack 配置中 css loader 的模块化支持，具体可参考相关文档。
+
+## 安装
+```
+npm install @viewfly/scoped-css
+```
+
+## API
+
+### scopedCSS()
+
+```css
+/* app.module.css */
+.app {
+  color: blue
+}
+```
+
+```jsx
+import { scopedCSS } from '@viewfly/scoped-css'
+
+import css from './app.module.css'
+
+const App = scopedCSS(css, () => {
+  return () => {
+    return <div css="app">App</div>
+  }
+})
+```
+
+scopedCSS 通过会识别标签的 css 属性，并替换为模拟化的 css class 类名。css 不仅可以支持字符串，还可以支持对象、数组、或数组内对象的组合。
+
+
+完整文档请参考官方网站：[viewfly.org](https://viewfly.org)

package/bundles/css-modules.d.ts

@@ -1,2 +1,9 @@
 import { ComponentSetup } from '@viewfly/core';
-export declare function scopedCss<T extends ComponentSetup>(css: Record<string, string>, factory: T): T;
+declare module '@viewfly/core' {
+    namespace JSX {
+        interface Attributes<T extends object> {
+            css?: string | Record<string, unknown> | Array<string | Record<string, unknown>>;
+        }
+    }
+}
+export declare function scopedCSS<T extends ComponentSetup>(css: Record<string, string>, factory: T): T;

package/bundles/index.esm.js

@@ -1,33 +1,67 @@
-import { JSXElement, Props } from '@viewfly/core';
+import { JSXElement } from '@viewfly/core';
 
-function replaceCSSClass(template, css) {
+function cssNamesToArray(config) {
+    const classes = [];
+    if (!config) {
+        return classes;
+    }
+    if (typeof config === 'string') {
+        const items = config.match(/\S+/g);
+        return items || classes;
+    }
+    else if (Array.isArray(config)) {
+        for (const i of config) {
+            classes.push(...cssNamesToArray(i));
+        }
+    }
+    else if (typeof config === 'object') {
+        if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
+            classes.push(config.toString());
+            return classes;
+        }
+        for (const key in config) {
+            if ({}.hasOwnProperty.call(config, key) && config[key]) {
+                classes.push(key);
+            }
+        }
+    }
+    return classes;
+}
+function replaceCSSClass(template, cssMap) {
     if (template instanceof JSXElement) {
-        let { attrs, classes, children } = template.props;
-        const cssNames = attrs.get('css');
-        attrs.delete('css');
+        let { class: className, children } = template.props;
+        const css = template.props.css;
+        Reflect.deleteProperty(template.props, 'css');
         const scopedClasses = [];
-        Props.classToArray(cssNames).forEach(i => {
-            const klass = css[i];
+        cssNamesToArray(css).forEach(i => {
+            const klass = cssMap[i];
             if (klass) {
                 scopedClasses.push(klass);
             }
         });
         const c = scopedClasses.join(' ');
         if (c) {
-            if (classes) {
-                classes += ' ' + c;
+            if (className) {
+                className += ' ' + c;
             }
             else {
-                classes = c;
+                className = c;
             }
         }
-        template.props.classes = classes;
-        children.forEach(child => {
-            replaceCSSClass(child, css);
-        });
+        if (className) {
+            template.props.class = className;
+        }
+        if (Array.isArray(children)) {
+            children.forEach(child => {
+                replaceCSSClass(child, cssMap);
+            });
+        }
+        else {
+            replaceCSSClass(children, cssMap);
+        }
     }
 }
-function scopedCss(css, factory) {
+function scopedCSS(css, factory) {
     return function (props) {
         const componentRender = factory(props);
         return function () {
@@ -38,4 +72,4 @@ function scopedCss(css, factory) {
     };
 }
 
-export { scopedCss };
+export { scopedCSS };

package/bundles/index.js

@@ -2,34 +2,68 @@
 
 var core = require('@viewfly/core');
 
-function replaceCSSClass(template, css) {
+function cssNamesToArray(config) {
+    const classes = [];
+    if (!config) {
+        return classes;
+    }
+    if (typeof config === 'string') {
+        const items = config.match(/\S+/g);
+        return items || classes;
+    }
+    else if (Array.isArray(config)) {
+        for (const i of config) {
+            classes.push(...cssNamesToArray(i));
+        }
+    }
+    else if (typeof config === 'object') {
+        if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
+            classes.push(config.toString());
+            return classes;
+        }
+        for (const key in config) {
+            if ({}.hasOwnProperty.call(config, key) && config[key]) {
+                classes.push(key);
+            }
+        }
+    }
+    return classes;
+}
+function replaceCSSClass(template, cssMap) {
     if (template instanceof core.JSXElement) {
-        let { attrs, classes, children } = template.props;
-        const cssNames = attrs.get('css');
-        attrs.delete('css');
+        let { class: className, children } = template.props;
+        const css = template.props.css;
+        Reflect.deleteProperty(template.props, 'css');
         const scopedClasses = [];
-        core.Props.classToArray(cssNames).forEach(i => {
-            const klass = css[i];
+        cssNamesToArray(css).forEach(i => {
+            const klass = cssMap[i];
             if (klass) {
                 scopedClasses.push(klass);
             }
         });
         const c = scopedClasses.join(' ');
         if (c) {
-            if (classes) {
-                classes += ' ' + c;
+            if (className) {
+                className += ' ' + c;
             }
             else {
-                classes = c;
+                className = c;
             }
         }
-        template.props.classes = classes;
-        children.forEach(child => {
-            replaceCSSClass(child, css);
-        });
+        if (className) {
+            template.props.class = className;
+        }
+        if (Array.isArray(children)) {
+            children.forEach(child => {
+                replaceCSSClass(child, cssMap);
+            });
+        }
+        else {
+            replaceCSSClass(children, cssMap);
+        }
     }
 }
-function scopedCss(css, factory) {
+function scopedCSS(css, factory) {
     return function (props) {
         const componentRender = factory(props);
         return function () {
@@ -40,4 +74,4 @@ function scopedCss(css, factory) {
     };
 }
 
-exports.scopedCss = scopedCss;
+exports.scopedCSS = scopedCSS;

package/package.json

@@ -1,21 +1,18 @@
 {
   "name": "@viewfly/scoped-css",
-  "version": "0.0.1-alpha.8",
-  "description": "Viewfly is a simple and easy-to-use JavaScript framework with an intuitive development experience",
+  "version": "0.0.1",
+  "description": "A library for supporting scoped style sheets in the Viewfly framework。",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",
   "typings": "./bundles/public-api.d.ts",
   "scripts": {
-    "start": "webpack-dev-server",
-    "test": "cross-env env=test jest",
-    "test-c": "cross-env env=test jest --coverage",
     "build:lib": "rimraf bundles && rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript",
     "publish:lib": "npm run build:lib && npm publish --access=public"
   },
   "license": "MIT",
   "keywords": [],
   "dependencies": {
-    "@viewfly/core": "^0.0.1-alpha.8"
+    "@viewfly/core": "^0.0.1"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^23.0.2",
@@ -35,5 +32,5 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "462b51e8623348002ba7c6ba2caf7df131534506"
+  "gitHead": "13f2af4215a1cd85af544af55744b2635e5cbf1b"
 }

package/rollup.config.ts

@@ -1,24 +0,0 @@
-import commonjs from '@rollup/plugin-commonjs'
-import typescript from '@rollup/plugin-typescript'
-
-export default {
-  input: 'src/public-api.ts',
-  output: [
-    {
-      file: './bundles/index.js',
-      format: 'cjs'
-    },
-    {
-      file: './bundles/index.esm.js',
-      format: 'esm'
-    }
-  ],
-  plugins: [
-    commonjs(),
-    typescript({
-      compilerOptions: {
-        paths: {}
-      }
-    })
-  ]
-}

package/src/css-modules.ts

@@ -1,39 +0,0 @@
-import { JSXElement, ComponentSetup, Props } from '@viewfly/core'
-
-function replaceCSSClass(template, css: Record<string, string>) {
-  if (template instanceof JSXElement) {
-    let { attrs, classes, children } = template.props
-    const cssNames = attrs.get('css')
-    attrs.delete('css')
-    const scopedClasses: string[] = []
-    Props.classToArray(cssNames).forEach(i => {
-      const klass = css[i]
-      if (klass) {
-        scopedClasses.push(klass)
-      }
-    })
-    const c = scopedClasses.join(' ')
-    if (c) {
-      if (classes) {
-        classes += ' ' + c
-      } else {
-        classes = c
-      }
-    }
-    template.props.classes = classes
-    children.forEach(child => {
-      replaceCSSClass(child, css)
-    })
-  }
-}
-
-export function scopedCss<T extends ComponentSetup>(css: Record<string, string>, factory: T): T {
-  return function (props: any) {
-    const componentRender = factory(props)
-    return function () {
-      const template = componentRender()
-      replaceCSSClass(template, css)
-      return template
-    }
-  } as T
-}

package/src/public-api.ts

@@ -1 +0,0 @@
-export * from './css-modules'

package/tsconfig.json

@@ -1,37 +0,0 @@
-{
-  "compilerOptions": {
-    "declaration": true,
-    "useDefineForClassFields": false,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true,
-    "lib": [
-      "esnext",
-      "dom"
-    ],
-    "target": "es6",
-    "strict": true,
-    "module": "es2020",
-    "moduleResolution": "node",
-    "inlineSourceMap": true,
-    "inlineSources": true,
-    "noImplicitAny": false,
-    "ignoreDeprecations": "5.0",
-    "suppressImplicitAnyIndexErrors": true,
-    "outDir": "bundles/",
-    "downlevelIteration": true,
-    "paths": {
-      "@viewfly/core": [
-        "../core/src/public-api.ts"
-      ]
-    }
-  },
-  "include": [
-    "src"
-  ],
-  "ts-node": {
-    "compilerOptions": {
-      "module": "CommonJS"
-    }
-  }
-}