Initial commit

.editorconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.js

@@ -0,0 +1,27 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends:
+    process.env.PLATFORM_ENV === "react"
+      ? ["react-app"]
+      : ["plugin:vue/essential", "@vue/standard"],
+  rules: {
+    "one-var": "off",
+    "no-mixed-operators": "off",
+    "no-template-curly-in-string": "off",
+    "space-before-function-paren": "off",
+    "arrow-parens": "off",
+    "generator-star-spacing": "off",
+    "no-debugger": "off",
+    "vue/require-prop-types": "off",
+    "vue/max-attributes-per-line": "off",
+    "vue/require-default-prop": "off",
+    "vue/html-self-closing": "off",
+    "vue/attributes-order": "off"
+  },
+  parserOptions: {
+    parser: "babel-eslint"
+  }
+};

.gitignore

@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+/card
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1,2 +1,21 @@
-# aui3-poc-demo
-Created with CodeSandbox
+# AUI3 POC Demo
+
+## Project setup
+
+    yarn install
+
+### Compiles and hot-reloads for Vue Demo
+
+    yarn serve:vue
+
+### Compiles and hot-reloads for React Demo
+
+    yarn serve:react
+
+### Compiles and minifies for production
+
+    yarn build
+
+### Run your production
+
+    yarn start

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [process.env.PLATFORM_ENV === "react" ? "react-app" : "@vue/app"]
+};

config-overrides.js

@@ -0,0 +1,13 @@
+const path = require("path");
+const fs = require("fs");
+
+const appDirectory = fs.realpathSync(process.cwd());
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+
+module.exports = {
+  paths: function(paths, env) {
+    paths.appBuild = resolveApp("dist/react");
+    paths.appHtml = resolveApp("public/react.html");
+    return paths;
+  }
+};

http-server.js

@@ -0,0 +1,36 @@
+var express = require("express");
+var compression = require("compression");
+var http = require("http");
+var path = require("path");
+var portrange = 8090;
+var app = express();
+
+app.use(compression());
+app.use("/", express.static(path.resolve(__dirname, "./dist/")));
+
+function getPort(cb) {
+  var port = portrange;
+  portrange += 1;
+
+  var server = http.createServer();
+  server.listen(port, function() {
+    server.once("close", function() {
+      cb(port);
+    });
+    server.close();
+  });
+  server.on("error", function() {
+    getPort(cb);
+  });
+}
+
+getPort(function(port) {
+  app.listen(port, function() {
+    require("child_process").exec(
+      "start chrome http://localhost:" + port + "/vue"
+    );
+    require("child_process").exec(
+      "start chrome http://localhost:" + port + "/react"
+    );
+  });
+});

package.json

@@ -0,0 +1,56 @@
+{
+  "name": "aui3-poc-demo",
+  "version": "1.0.0",
+  "description": "Hook & Composition API + Renderless + CSS Vars = AUI 3.0",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "serve:vue": "vue-cli-service serve --open",
+    "serve:react": "cross-env PLATFORM_ENV=react react-app-rewired start",
+    "build": "npm run build:vue && npm run build:react",
+    "build:vue": "vue-cli-service build",
+    "build:react": "cross-env PLATFORM_ENV=react PUBLIC_URL=./ react-app-rewired build",
+    "build:card": "cross-env PLATFORM_ENV=card vue build -t lib -n card -d card src/card/Card.vue && cp-cli card/card.umd.min.js public/card.js",
+    "start": "node http-server.js"
+  },
+  "dependencies": {
+    "core-js": "^2.6.5",
+    "css-vars-ponyfill": "^2.0.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "vue": "^2.6.10",
+    "vue-function-api": "^2.1.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.10.0",
+    "@vue/cli-plugin-eslint": "^3.10.0",
+    "@vue/cli-service": "^3.10.0",
+    "@vue/eslint-config-standard": "^4.0.0",
+    "babel-eslint": "10.0.1",
+    "compression": "^1.7.4",
+    "cp-cli": "^2.0.0",
+    "cross-env": "^7.0.0",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "express": "^4.17.1",
+    "node-sass": "^4.9.0",
+    "react-app-rewired": "^2.1.3",
+    "react-scripts": "3.0.1",
+    "sass-loader": "^7.1.0",
+    "typescript": "*",
+    "vue-template-compiler": "^2.6.10",
+    "webpack": "4.29.6"
+  },
+  "resolutions": {
+    "@babel/parser": "7.7.5"
+  },
+  "browserslist": {
+    "production": [">0.2%", "not dead", "not op_mini all"],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "keywords": []
+}

public/currentScript-polyfill.js

@@ -0,0 +1,34 @@
+// document.currentScript polyfill by Adam Miller
+
+// MIT license
+
+(function(document) {
+  var currentScript = 'currentScript',
+    scripts = document.getElementsByTagName('script') // Live NodeList collection
+
+  // If browser needs currentScript polyfill, add get currentScript() to the document object
+  if (!(currentScript in document)) {
+    Object.defineProperty(document, currentScript, {
+      get: function() {
+        // IE 6-10 supports script readyState
+        // IE 10+ support stack trace
+        try { throw new Error() } catch (err) {
+          // Find the second match for the "at" string to get file src url from stack.
+          // Specifically works with the format of stack traces in IE.
+          var i, script, res = ((/.*at [^(]*\((.*):.+:.+\)$/ig).exec(err.stack) || [false])[1]
+
+          // For all scripts on the page, if src matches or if ready state is interactive, return the script tag
+          for (i in scripts) {
+            script = scripts[i]
+            if (typeof script.readyState !== 'undefined' && (script.src === res || script.readyState === 'interactive')) {
+              return script
+            }
+          }
+
+          // If no match, return null
+          return null
+        }
+      }
+    })
+  }
+})(document)

public/mainifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/react.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/react.ico" />
+    <link href="tailwind.css" rel="stylesheet" />
+    <link href="bootstrap.min.css" rel="stylesheet" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>AUI 3.0 POC -- React</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

public/vue.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>vue.ico" />
+    <title>AUI 3.0 POC -- Vue</title>
+    <link href="tailwind.css" rel="stylesheet" />
+    <link href="bootstrap.min.css" rel="stylesheet" />
+    <script src="system.js"></script>
+    <script src="currentScript-polyfill.js"></script>
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but vue1 doesn't work properly without JavaScript enabled.
+        Please enable it to continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.jsx

@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { changeTheme, supportCssVars, enableCssVars, themeVars } from "./theme";
+import Todo from "./views/Todo";
+import tagVars from "./theme/Tag";
+import todoVars from "./theme/Todo";
+import "./style/app.scss";
+
+export default () => {
+  const [todoColor, setTodoColor] = useState(() =>
+    themeVars(Object.keys(todoVars)[0])
+  );
+  const [tagColor, setTagColor] = useState(() =>
+    themeVars(Object.keys(tagVars)[0])
+  );
+  const [fontSize, setFontSize] = useState(() => themeVars("aui-font-size"));
+  const [theme, setTheme] = useState(themeVars());
+  const [title] = useState("New Tag");
+
+  const change = e => {
+    const apply = () => {
+      const { name, value } = e.target;
+
+      name === "aui-tag-color" && setTagColor(value);
+      name === "aui-todo-color" && setTodoColor(value);
+      name === "aui-font-size" && setFontSize(value);
+
+      setTheme(Object.assign(theme, { [name]: value }));
+      changeTheme(theme);
+    };
+
+    if (
+      !supportCssVars() &&
+      window.confirm("当前浏览器不支持主题切换，要启用兼容程序吗？")
+    ) {
+      enableCssVars().then(apply);
+    } else {
+      apply();
+    }
+  };
+
+  return (
+    <div id="app">
+      <div id="nav">
+        <span>更改 Tag 颜色 </span>
+        <input
+          name="aui-tag-color"
+          type="color"
+          size="4"
+          value={tagColor}
+          onChange={change}
+        />
+        <span>更改 {title} 颜色 </span>
+        <input
+          name="aui-todo-color"
+          type="color"
+          size="4"
+          value={todoColor}
+          onChange={change}
+        />
+        <span>更改字体大小 </span>
+        <input
+          name="aui-font-size"
+          type="text"
+          size="2"
+          value={fontSize}
+          onChange={change}
+        />
+      </div>
+      <Todo />
+    </div>
+  );
+};