chore: directory adjustment

packages/preact-css/examples/simple/README.md

@@ -0,0 +1,69 @@
+## Develop
+
+```bash
+npm install
+npm start
+```
+
+## Release
+
+```bash
+npm run build
+```
+
+## Eslint + Prettier
+
+``` bash
+npm run fix
+```
+
+## Directory description
+
+```
+├─ config
+├─ public
+├─ scripts
+├─ src
+│  ├─ assets
+│  ├─ elements    //Store all custom elements
+│  ├─ store       //Store all this store of pages
+│  ├─ admin.js    //Entry js of compiler，will build to admin.html
+│  └─ index.js    //Entry js of compiler，will build to index.html
+```
+
+## Build Scripts
+
+```json
+"scripts": {
+    "start": "node scripts/start.js",
+    "build": "PUBLIC_URL=. node scripts/build.js",
+    "build-windows": "set PUBLIC_URL=.&& node scripts/build.js",
+    "fix": "eslint src --fix"
+}
+```
+
+You can set up the PUBLIC_URL, such as:
+
+```bash
+...
+"build": "PUBLIC_URL=https://fe.wxpay.oa.com/dv node scripts/build.js",
+"build-windows": "set PUBLIC_URL=https://fe.wxpay.oa.com/dv&& node scripts/build.js",
+...
+```
+
+## Switch omi and omio
+
+Add or remove the alias config in package.json to switch omi and omio：
+
+```js
+ ...
+ "alias": {
+    "omi": "omio"
+  }
+  ...
+```
+
+## License
+
+MIT 
+

packages/preact-css/examples/simple/package.json

@@ -0,0 +1,144 @@
+{
+  "name": "my-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-class-properties": "^7.2.3",
+    "@babel/plugin-proposal-decorators": "^7.2.3",
+    "@babel/plugin-proposal-function-bind": "^7.2.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.2.0",
+    "@babel/preset-env": "^7.2.3",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/runtime": "^7.3.1",
+    "autoprefixer": "7.1.6",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "7.2.3",
+    "babel-jest": "20.0.3",
+    "babel-loader": "^8.0.5",
+    "case-sensitive-paths-webpack-plugin": "2.1.1",
+    "chalk": "1.1.3",
+    "css": "^2.2.4",
+    "css-loader": "^1.0.1",
+    "dotenv": "4.0.0",
+    "dotenv-expand": "4.2.0",
+    "eslint": "^4.18.2",
+    "eslint-config-prettier": "^3.1.0",
+    "eslint-loader": "1.9.0",
+    "eslint-plugin-flowtype": "2.39.1",
+    "eslint-plugin-import": "2.8.0",
+    "eslint-plugin-jsx-a11y": "5.1.1",
+    "eslint-plugin-prettier": "^3.0.0",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "file": "^0.2.2",
+    "file-loader": "^2.0.0",
+    "fs-extra": "3.0.1",
+    "html-webpack-plugin": "^4.0.0-beta.5",
+    "jest": "20.0.4",
+    "less": "^3.10.0",
+    "less-loader": "^5.0.0",
+    "mini-css-extract-plugin": "^0.5.0",
+    "object-assign": "4.1.1",
+    "omi": "latest",
+    "omi-router": "latest",
+    "omio": "latest",
+    "omiu": "latest",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "postcss-flexbugs-fixes": "3.2.0",
+    "postcss-loader": "2.0.8",
+    "preact": "^10.0.0",
+    "prettier": "^1.14.3",
+    "promise": "8.0.1",
+    "raf": "3.4.0",
+    "react-dev-utils": "^7.0.1",
+    "reomi": "latest",
+    "resolve": "1.6.0",
+    "style-loader": "0.19.0",
+    "sw-precache-webpack-plugin": "^0.11.5",
+    "to-string-loader": "^1.1.5",
+    "url": "^0.11.0",
+    "url-loader": "^1.1.2",
+    "webpack": "^4.28.3",
+    "webpack-cli": "^3.2.0",
+    "webpack-dev-server": "^3.1.10",
+    "webpack-manifest-plugin": "^2.0.4",
+    "webpack-merge": "^4.2.1",
+    "whatwg-fetch": "2.0.3"
+  },
+  "scripts": {
+    "start": "node scripts/start.js",
+    "build": "PUBLIC_URL=. node scripts/build.js",
+    "build-windows": "set PUBLIC_URL=.&& node scripts/build.js",
+    "fix": "eslint src --fix"
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,mjs}"
+    ],
+    "setupFiles": [
+      "<rootDir>/config/polyfills.js"
+    ],
+    "testMatch": [
+      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
+      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
+    ],
+    "testEnvironment": "node",
+    "testURL": "http://localhost",
+    "transform": {
+      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
+      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
+      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
+    },
+    "transformIgnorePatterns": [
+      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
+    ],
+    "moduleNameMapper": {
+      "^react-native$": "react-native-web"
+    },
+    "moduleFileExtensions": [
+      "web.js",
+      "js",
+      "json",
+      "web.jsx",
+      "jsx",
+      "node",
+      "mjs"
+    ]
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      [
+        "@babel/preset-react",
+        {
+          "pragma": "Omi.h"
+        }
+      ]
+    ],
+    "plugins": [
+      "@babel/plugin-proposal-class-properties",
+      "@babel/transform-runtime",
+      [
+        "@babel/plugin-proposal-decorators",
+        {
+          "legacy": true
+        }
+      ],
+      "@babel/plugin-proposal-function-bind",
+      "@babel/plugin-proposal-object-rest-spread",
+      "@babel/plugin-syntax-dynamic-import"
+    ]
+  },
+  "prettier": {
+    "singleQuote": true,
+    "semi": false,
+    "tabWidth": 2,
+    "useTabs": false
+  },
+  "alias": {
+    "omi": "omio"
+  }
+}

packages/preact-css/examples/simple/src/preact-css.js

@@ -0,0 +1,31 @@
+import { options } from 'preact'
+import { getStyleId, appendStyle } from './style'
+
+let componentNode
+
+// store a reference to the "current component" vnode
+let oldDiff = options._diff || options.__b
+options._diff = options.__b = vnode => {
+  componentNode = vnode
+  if (oldDiff) oldDiff(vnode)
+}
+
+// reset component reference at end of diffing:
+let oldDiffed = options.diffed
+options.diffed = vnode => {
+  if (componentNode === vnode) componentNode = null
+  if (oldDiffed) oldDiffed(vnode)
+}
+
+// our vnode hook looks up the associated component
+let old = options.vnode
+options.vnode = vnode => {
+  const component = componentNode && (componentNode._component || componentNode.__c)
+  if (component) {
+
+    const styleId = getStyleId(component.constructor)
+    appendStyle(component.constructor.css, styleId);
+    (vnode.props || (vnode.props = {}))[styleId] = ''
+  }
+  if (old) old(vnode)
+}

packages/preact-css/examples/simple/src/style.js

@@ -0,0 +1,87 @@
+
+let styleId = 0
+const styleList = []
+const cache = {}
+
+export function getStyleId(ctor) {
+  for (let i = 0, len = styleList.length; i < len; i++) {
+    let item = styleList[i]
+
+    if (item.ctor === ctor) {
+      return item.attrName
+    }
+  }
+
+  let attrName = '_ss' + styleId
+  styleList.push({ ctor, attrName })
+  styleId++
+
+  return attrName
+}
+
+// many thanks to https://github.com/thomaspark/scoper/
+export function scoper(css, prefix) {
+  console.log(css, prefix)
+  prefix = '[' + prefix.toLowerCase() + ']'
+  // https://www.w3.org/TR/css-syntax-3/#lexical
+  css = css.replace(/\/\*[^*]*\*+([^/][^*]*\*+)*\//g, '')
+  // eslint-disable-next-line
+  let re = new RegExp('([^\r\n,{}:]+)(:[^\r\n,{}]+)?(,(?=[^{}]*{)|\s*{)', 'g')
+  /**
+   * Example:
+   *
+   * .classname::pesudo { color:red }
+   *
+   * g1 is normal selector `.classname`
+   * g2 is pesudo class or pesudo element
+   * g3 is the suffix
+   */
+  css = css.replace(re, (g0, g1, g2, g3) => {
+    if (typeof g2 === 'undefined') {
+      g2 = ''
+    }
+
+    /* eslint-ignore-next-line */
+    if (
+      g1.match(
+        /^\s*(@media|\d+%?|@-webkit-keyframes|@keyframes|to|from|@font-face)/
+      )
+    ) {
+      return g1 + g2 + g3
+    }
+
+    let appendClass = g1.replace(/(\s*)$/, '') + prefix + g2
+ 
+    return appendClass + g3
+  })
+
+  return css
+}
+
+export function addStyle(cssText, id) {
+  id = id.toLowerCase()
+  let ele = document.getElementById(id)
+  let head = document.getElementsByTagName('head')[0]
+  if (ele && ele.parentNode === head) {
+    head.removeChild(ele)
+  }
+
+  let someThingStyles = document.createElement('style')
+  head.appendChild(someThingStyles)
+  someThingStyles.setAttribute('type', 'text/css')
+  someThingStyles.setAttribute('id', id)
+  if (window.ActiveXObject) {
+    someThingStyles.styleSheet.cssText = cssText
+  } else {
+    someThingStyles.textContent = cssText
+  }
+}
+
+
+
+export function appendStyle(style, attr) {
+  if (!cache[attr]) {
+    addStyle(scoper(style, attr), attr)
+    cache[attr] = true
+  }
+}

packages/preact-css/package.json

@@ -1,144 +1,23 @@
 {
-  "name": "my-app",
+  "name": "preact-css",
   "version": "0.1.0",
-  "private": true,
+  "description": "Scoped css with pure css string for preact.",
+  "main": "index.js",
+  "directories": {
+    "example": "examples"
+  },
   "dependencies": {
-    "@babel/cli": "^7.0.0",
-    "@babel/core": "^7.2.2",
-    "@babel/plugin-proposal-class-properties": "^7.2.3",
-    "@babel/plugin-proposal-decorators": "^7.2.3",
-    "@babel/plugin-proposal-function-bind": "^7.2.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.2.0",
-    "@babel/preset-env": "^7.2.3",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/runtime": "^7.3.1",
-    "autoprefixer": "7.1.6",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "7.2.3",
-    "babel-jest": "20.0.3",
-    "babel-loader": "^8.0.5",
-    "case-sensitive-paths-webpack-plugin": "2.1.1",
-    "chalk": "1.1.3",
-    "css": "^2.2.4",
-    "css-loader": "^1.0.1",
-    "dotenv": "4.0.0",
-    "dotenv-expand": "4.2.0",
-    "eslint": "^4.18.2",
-    "eslint-config-prettier": "^3.1.0",
-    "eslint-loader": "1.9.0",
-    "eslint-plugin-flowtype": "2.39.1",
-    "eslint-plugin-import": "2.8.0",
-    "eslint-plugin-jsx-a11y": "5.1.1",
-    "eslint-plugin-prettier": "^3.0.0",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "file": "^0.2.2",
-    "file-loader": "^2.0.0",
-    "fs-extra": "3.0.1",
-    "html-webpack-plugin": "^4.0.0-beta.5",
-    "jest": "20.0.4",
-    "less": "^3.10.0",
-    "less-loader": "^5.0.0",
-    "mini-css-extract-plugin": "^0.5.0",
-    "object-assign": "4.1.1",
-    "omi": "latest",
-    "omi-router": "latest",
-    "omio": "latest",
-    "omiu": "latest",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "postcss-flexbugs-fixes": "3.2.0",
-    "postcss-loader": "2.0.8",
-    "preact": "^10.0.0",
-    "prettier": "^1.14.3",
-    "promise": "8.0.1",
-    "raf": "3.4.0",
-    "react-dev-utils": "^7.0.1",
-    "reomi": "latest",
-    "resolve": "1.6.0",
-    "style-loader": "0.19.0",
-    "sw-precache-webpack-plugin": "^0.11.5",
-    "to-string-loader": "^1.1.5",
-    "url": "^0.11.0",
-    "url-loader": "^1.1.2",
-    "webpack": "^4.28.3",
-    "webpack-cli": "^3.2.0",
-    "webpack-dev-server": "^3.1.10",
-    "webpack-manifest-plugin": "^2.0.4",
-    "webpack-merge": "^4.2.1",
-    "whatwg-fetch": "2.0.3"
+    "preact": "^10.0.0"
   },
+  "devDependencies": {},
   "scripts": {
-    "start": "node scripts/start.js",
-    "build": "PUBLIC_URL=. node scripts/build.js",
-    "build-windows": "set PUBLIC_URL=.&& node scripts/build.js",
-    "fix": "eslint src --fix"
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "jest": {
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx,mjs}"
-    ],
-    "setupFiles": [
-      "<rootDir>/config/polyfills.js"
-    ],
-    "testMatch": [
-      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
-      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
-    ],
-    "testEnvironment": "node",
-    "testURL": "http://localhost",
-    "transform": {
-      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
-      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
-      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
-    },
-    "transformIgnorePatterns": [
-      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
-    ],
-    "moduleNameMapper": {
-      "^react-native$": "react-native-web"
-    },
-    "moduleFileExtensions": [
-      "web.js",
-      "js",
-      "json",
-      "web.jsx",
-      "jsx",
-      "node",
-      "mjs"
-    ]
-  },
-  "babel": {
-    "presets": [
-      "@babel/preset-env",
-      [
-        "@babel/preset-react",
-        {
-          "pragma": "Omi.h"
-        }
-      ]
-    ],
-    "plugins": [
-      "@babel/plugin-proposal-class-properties",
-      "@babel/transform-runtime",
-      [
-        "@babel/plugin-proposal-decorators",
-        {
-          "legacy": true
-        }
-      ],
-      "@babel/plugin-proposal-function-bind",
-      "@babel/plugin-proposal-object-rest-spread",
-      "@babel/plugin-syntax-dynamic-import"
-    ]
-  },
-  "prettier": {
-    "singleQuote": true,
-    "semi": false,
-    "tabWidth": 2,
-    "useTabs": false
-  },
-  "alias": {
-    "omi": "omio"
-  }
+  "keywords": [
+    "preact",
+    "omi",
+    "preact-css"
+  ],
+  "author": "dntzhang",
+  "license": "MIT"
 }