Skip to content

Commit 10ebbff

Browse files
kevinmochkevinmoch
committed
Initial commit
1 parent 07b0e66 commit 10ebbff

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+1742
-2
lines changed

‎.editorconfig

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
[*.{js,jsx,ts,tsx,vue}]
2+
indent_style = space
3+
indent_size = 2
4+
trim_trailing_whitespace = true
5+
insert_final_newline = true

‎.eslintrc.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
node: true
5+
},
6+
extends:
7+
process.env.PLATFORM_ENV === "react"
8+
? ["react-app"]
9+
: ["plugin:vue/essential", "@vue/standard"],
10+
rules: {
11+
"one-var": "off",
12+
"no-mixed-operators": "off",
13+
"no-template-curly-in-string": "off",
14+
"space-before-function-paren": "off",
15+
"arrow-parens": "off",
16+
"generator-star-spacing": "off",
17+
"no-debugger": "off",
18+
"vue/require-prop-types": "off",
19+
"vue/max-attributes-per-line": "off",
20+
"vue/require-default-prop": "off",
21+
"vue/html-self-closing": "off",
22+
"vue/attributes-order": "off"
23+
},
24+
parserOptions: {
25+
parser: "babel-eslint"
26+
}
27+
};

‎.gitignore

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
/card
5+
6+
# local env files
7+
.env.local
8+
.env.*.local
9+
10+
# Log files
11+
npm-debug.log*
12+
yarn-debug.log*
13+
yarn-error.log*
14+
15+
# Editor directories and files
16+
.idea
17+
.vscode
18+
*.suo
19+
*.ntvs*
20+
*.njsproj
21+
*.sln
22+
*.sw?

‎README.md

+21-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,21 @@
1-
# aui3-poc-demo
2-
Created with CodeSandbox
1+
# AUI3 POC Demo
2+
3+
## Project setup
4+
5+
yarn install
6+
7+
### Compiles and hot-reloads for Vue Demo
8+
9+
yarn serve:vue
10+
11+
### Compiles and hot-reloads for React Demo
12+
13+
yarn serve:react
14+
15+
### Compiles and minifies for production
16+
17+
yarn build
18+
19+
### Run your production
20+
21+
yarn start

‎babel.config.js

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

‎config-overrides.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const path = require("path");
2+
const fs = require("fs");
3+
4+
const appDirectory = fs.realpathSync(process.cwd());
5+
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
6+
7+
module.exports = {
8+
paths: function(paths, env) {
9+
paths.appBuild = resolveApp("dist/react");
10+
paths.appHtml = resolveApp("public/react.html");
11+
return paths;
12+
}
13+
};

‎http-server.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
var express = require("express");
2+
var compression = require("compression");
3+
var http = require("http");
4+
var path = require("path");
5+
var portrange = 8090;
6+
var app = express();
7+
8+
app.use(compression());
9+
app.use("/", express.static(path.resolve(__dirname, "./dist/")));
10+
11+
function getPort(cb) {
12+
var port = portrange;
13+
portrange += 1;
14+
15+
var server = http.createServer();
16+
server.listen(port, function() {
17+
server.once("close", function() {
18+
cb(port);
19+
});
20+
server.close();
21+
});
22+
server.on("error", function() {
23+
getPort(cb);
24+
});
25+
}
26+
27+
getPort(function(port) {
28+
app.listen(port, function() {
29+
require("child_process").exec(
30+
"start chrome http://localhost:" + port + "/vue"
31+
);
32+
require("child_process").exec(
33+
"start chrome http://localhost:" + port + "/react"
34+
);
35+
});
36+
});

‎package.json

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
{
2+
"name": "aui3-poc-demo",
3+
"version": "1.0.0",
4+
"description": "Hook & Composition API + Renderless + CSS Vars = AUI 3.0",
5+
"license": "MIT",
6+
"private": true,
7+
"scripts": {
8+
"serve:vue": "vue-cli-service serve --open",
9+
"serve:react": "cross-env PLATFORM_ENV=react react-app-rewired start",
10+
"build": "npm run build:vue && npm run build:react",
11+
"build:vue": "vue-cli-service build",
12+
"build:react": "cross-env PLATFORM_ENV=react PUBLIC_URL=./ react-app-rewired build",
13+
"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",
14+
"start": "node http-server.js"
15+
},
16+
"dependencies": {
17+
"core-js": "^2.6.5",
18+
"css-vars-ponyfill": "^2.0.2",
19+
"react": "^16.8.6",
20+
"react-dom": "^16.8.6",
21+
"vue": "^2.6.10",
22+
"vue-function-api": "^2.1.1"
23+
},
24+
"devDependencies": {
25+
"@vue/cli-plugin-babel": "^3.10.0",
26+
"@vue/cli-plugin-eslint": "^3.10.0",
27+
"@vue/cli-service": "^3.10.0",
28+
"@vue/eslint-config-standard": "^4.0.0",
29+
"babel-eslint": "10.0.1",
30+
"compression": "^1.7.4",
31+
"cp-cli": "^2.0.0",
32+
"cross-env": "^7.0.0",
33+
"eslint": "^5.16.0",
34+
"eslint-plugin-vue": "^5.0.0",
35+
"express": "^4.17.1",
36+
"node-sass": "^4.9.0",
37+
"react-app-rewired": "^2.1.3",
38+
"react-scripts": "3.0.1",
39+
"sass-loader": "^7.1.0",
40+
"typescript": "*",
41+
"vue-template-compiler": "^2.6.10",
42+
"webpack": "4.29.6"
43+
},
44+
"resolutions": {
45+
"@babel/parser": "7.7.5"
46+
},
47+
"browserslist": {
48+
"production": [">0.2%", "not dead", "not op_mini all"],
49+
"development": [
50+
"last 1 chrome version",
51+
"last 1 firefox version",
52+
"last 1 safari version"
53+
]
54+
},
55+
"keywords": []
56+
}

‎public/bootstrap.min.css

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/card.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/currentScript-polyfill.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// document.currentScript polyfill by Adam Miller
2+
3+
// MIT license
4+
5+
(function(document) {
6+
var currentScript = 'currentScript',
7+
scripts = document.getElementsByTagName('script') // Live NodeList collection
8+
9+
// If browser needs currentScript polyfill, add get currentScript() to the document object
10+
if (!(currentScript in document)) {
11+
Object.defineProperty(document, currentScript, {
12+
get: function() {
13+
// IE 6-10 supports script readyState
14+
// IE 10+ support stack trace
15+
try { throw new Error() } catch (err) {
16+
// Find the second match for the "at" string to get file src url from stack.
17+
// Specifically works with the format of stack traces in IE.
18+
var i, script, res = ((/.*at [^(]*\((.*):.+:.+\)$/ig).exec(err.stack) || [false])[1]
19+
20+
// For all scripts on the page, if src matches or if ready state is interactive, return the script tag
21+
for (i in scripts) {
22+
script = scripts[i]
23+
if (typeof script.readyState !== 'undefined' && (script.src === res || script.readyState === 'interactive')) {
24+
return script
25+
}
26+
}
27+
28+
// If no match, return null
29+
return null
30+
}
31+
}
32+
})
33+
}
34+
})(document)

‎public/mainifest.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
}
10+
],
11+
"start_url": ".",
12+
"display": "standalone",
13+
"theme_color": "#000000",
14+
"background_color": "#ffffff"
15+
}

‎public/react.html

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

‎public/react.ico

5.28 KB
Binary file not shown.

‎public/system.js

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/tailwind.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/vue.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
7+
<link rel="icon" href="<%= BASE_URL %>vue.ico" />
8+
<title>AUI 3.0 POC -- Vue</title>
9+
<link href="tailwind.css" rel="stylesheet" />
10+
<link href="bootstrap.min.css" rel="stylesheet" />
11+
<script src="system.js"></script>
12+
<script src="currentScript-polyfill.js"></script>
13+
</head>
14+
<body>
15+
<noscript>
16+
<strong
17+
>We're sorry but vue1 doesn't work properly without JavaScript enabled.
18+
Please enable it to continue.</strong
19+
>
20+
</noscript>
21+
<div id="app"></div>
22+
<!-- built files will be auto injected -->
23+
</body>
24+
</html>

‎public/vue.ico

5.48 KB
Binary file not shown.

‎src/App.jsx

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import React, { useState } from "react";
2+
import { changeTheme, supportCssVars, enableCssVars, themeVars } from "./theme";
3+
import Todo from "./views/Todo";
4+
import tagVars from "./theme/Tag";
5+
import todoVars from "./theme/Todo";
6+
import "./style/app.scss";
7+
8+
export default () => {
9+
const [todoColor, setTodoColor] = useState(() =>
10+
themeVars(Object.keys(todoVars)[0])
11+
);
12+
const [tagColor, setTagColor] = useState(() =>
13+
themeVars(Object.keys(tagVars)[0])
14+
);
15+
const [fontSize, setFontSize] = useState(() => themeVars("aui-font-size"));
16+
const [theme, setTheme] = useState(themeVars());
17+
const [title] = useState("New Tag");
18+
19+
const change = e => {
20+
const apply = () => {
21+
const { name, value } = e.target;
22+
23+
name === "aui-tag-color" && setTagColor(value);
24+
name === "aui-todo-color" && setTodoColor(value);
25+
name === "aui-font-size" && setFontSize(value);
26+
27+
setTheme(Object.assign(theme, { [name]: value }));
28+
changeTheme(theme);
29+
};
30+
31+
if (
32+
!supportCssVars() &&
33+
window.confirm("当前浏览器不支持主题切换，要启用兼容程序吗？")
34+
) {
35+
enableCssVars().then(apply);
36+
} else {
37+
apply();
38+
}
39+
};
40+
41+
return (
42+
<div id="app">
43+
<div id="nav">
44+
<span>更改 Tag 颜色 </span>
45+
<input
46+
name="aui-tag-color"
47+
type="color"
48+
size="4"
49+
value={tagColor}
50+
onChange={change}
51+
/>
52+
<span>更改 {title} 颜色 </span>
53+
<input
54+
name="aui-todo-color"
55+
type="color"
56+
size="4"
57+
value={todoColor}
58+
onChange={change}
59+
/>
60+
<span>更改字体大小 </span>
61+
<input
62+
name="aui-font-size"
63+
type="text"
64+
size="2"
65+
value={fontSize}
66+
onChange={change}
67+
/>
68+
</div>
69+
<Todo />
70+
</div>
71+
);
72+
};

0 commit comments

Comments
 (0)