init omis site src
This commit is contained in:
dntzhang
parent
836b8d4a9f
commit
3f5598ad21
|
|
@ -0,0 +1,63 @@
|
|||
{
|
||||
"parser": "babel-eslint",
|
||||
"extends": ["prettier"],
|
||||
"plugins": ["prettier"],
|
||||
"env": {
|
||||
"browser": true,
|
||||
"mocha": true,
|
||||
"node": true,
|
||||
"es6": true
|
||||
},
|
||||
"parserOptions": {
|
||||
"ecmaFeatures": {
|
||||
"modules": true,
|
||||
"jsx": true
|
||||
}
|
||||
},
|
||||
"globals": {
|
||||
"sinon": true,
|
||||
"expect": true
|
||||
},
|
||||
"rules": {
|
||||
"prettier/prettier": "error",
|
||||
"no-cond-assign": 1,
|
||||
"no-empty": 0,
|
||||
"no-console": 1,
|
||||
"semi": [1, "never"],
|
||||
"camelcase": 0,
|
||||
"comma-style": 2,
|
||||
"comma-dangle": [2, "never"],
|
||||
"indent": ["error", 2],
|
||||
"no-mixed-spaces-and-tabs": [2, "smart-tabs"],
|
||||
"no-trailing-spaces": [2, { "skipBlankLines": true }],
|
||||
"max-nested-callbacks": [2, 3],
|
||||
"no-eval": 2,
|
||||
"no-implied-eval": 2,
|
||||
"no-new-func": 2,
|
||||
"guard-for-in": 0,
|
||||
"eqeqeq": 0,
|
||||
"no-else-return": 2,
|
||||
"no-redeclare": 2,
|
||||
"no-dupe-keys": 2,
|
||||
"radix": 2,
|
||||
"strict": [2, "never"],
|
||||
"no-shadow": 0,
|
||||
"callback-return": [1, ["callback", "cb", "next", "done"]],
|
||||
"no-delete-var": 2,
|
||||
"no-undef-init": 2,
|
||||
"no-shadow-restricted-names": 2,
|
||||
"handle-callback-err": 0,
|
||||
"no-lonely-if": 2,
|
||||
"keyword-spacing": 2,
|
||||
"constructor-super": 2,
|
||||
"no-this-before-super": 2,
|
||||
"no-dupe-class-members": 2,
|
||||
"no-const-assign": 2,
|
||||
"prefer-spread": 2,
|
||||
"no-useless-concat": 2,
|
||||
"no-var": 2,
|
||||
"object-shorthand": 2,
|
||||
"prefer-arrow-callback": 2,
|
||||
"quotes": [1, "single"]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
## 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
|
||||
|
||||
About compiled website URL：
|
||||
|
||||
Such as in windows:
|
||||
|
||||
```json
|
||||
"scripts": {
|
||||
"start": "node scripts/start.js",
|
||||
"_build": "node scripts/build.js",
|
||||
"build":"set PUBLIC_URL=https://fe.wxpay.oa.com/dv&& npm run _build"
|
||||
}
|
||||
```
|
||||
|
||||
In mac os:
|
||||
|
||||
```json
|
||||
"scripts": {
|
||||
"start": "node scripts/start.js",
|
||||
"_build": "node scripts/build.js",
|
||||
"build":"PUBLIC_URL=https://fe.wxpay.oa.com/dv npm run _build",
|
||||
"fix": "eslint src --fix"
|
||||
},
|
||||
```
|
||||
|
||||
If you only want to use relative addresses:
|
||||
|
||||
```
|
||||
"build":"set PUBLIC_URL=.&& npm run _build" //windows
|
||||
"build":"PUBLIC_URL=. npm run _build", //mac os
|
||||
```
|
||||
|
||||
## Docs
|
||||
|
||||
Cli's auto-created project scaffolding is based on a single-page create-react-app to be converted into a multi-page one, with configuration issues to see [create-react-app user guide](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md)
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
let fs = require('fs'),
|
||||
fileList = [];
|
||||
|
||||
|
||||
if (typeof String.prototype.endsWith != 'function') {
|
||||
String.prototype.endsWith = function (suffix) {
|
||||
return this.indexOf(suffix, this.length - suffix.length) !== -1;
|
||||
};
|
||||
}
|
||||
|
||||
function walk(path) {
|
||||
let dirList = fs.readdirSync(path);
|
||||
dirList.forEach(function (item) {
|
||||
if (!fs.statSync(path + '/' + item).isDirectory()) {
|
||||
if (item.endsWith('\.js')) {
|
||||
fileList.push(item.substr(0, item.length - 3));
|
||||
}
|
||||
} else {
|
||||
//walk(path + '/' + item);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
walk('./src');
|
||||
|
||||
|
||||
|
||||
module.exports = fileList;
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
'use strict';
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const paths = require('./paths');
|
||||
|
||||
// Make sure that including paths.js after env.js will read .env variables.
|
||||
delete require.cache[require.resolve('./paths')];
|
||||
|
||||
const NODE_ENV = process.env.NODE_ENV;
|
||||
if (!NODE_ENV) {
|
||||
throw new Error(
|
||||
'The NODE_ENV environment variable is required but was not specified.'
|
||||
);
|
||||
}
|
||||
|
||||
// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
|
||||
var dotenvFiles = [
|
||||
`${paths.dotenv}.${NODE_ENV}.local`,
|
||||
`${paths.dotenv}.${NODE_ENV}`,
|
||||
// Don't include `.env.local` for `test` environment
|
||||
// since normally you expect tests to produce the same
|
||||
// results for everyone
|
||||
NODE_ENV !== 'test' && `${paths.dotenv}.local`,
|
||||
paths.dotenv,
|
||||
].filter(Boolean);
|
||||
|
||||
// Load environment variables from .env* files. Suppress warnings using silent
|
||||
// if this file is missing. dotenv will never modify any environment variables
|
||||
// that have already been set. Variable expansion is supported in .env files.
|
||||
// https://github.com/motdotla/dotenv
|
||||
// https://github.com/motdotla/dotenv-expand
|
||||
dotenvFiles.forEach(dotenvFile => {
|
||||
if (fs.existsSync(dotenvFile)) {
|
||||
require('dotenv-expand')(
|
||||
require('dotenv').config({
|
||||
path: dotenvFile,
|
||||
})
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// We support resolving modules according to `NODE_PATH`.
|
||||
// This lets you use absolute paths in imports inside large monorepos:
|
||||
// https://github.com/facebookincubator/create-react-app/issues/253.
|
||||
// It works similar to `NODE_PATH` in Node itself:
|
||||
// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
|
||||
// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
|
||||
// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
|
||||
// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
|
||||
// We also resolve them to make sure all tools using them work consistently.
|
||||
const appDirectory = fs.realpathSync(process.cwd());
|
||||
process.env.NODE_PATH = (process.env.NODE_PATH || '')
|
||||
.split(path.delimiter)
|
||||
.filter(folder => folder && !path.isAbsolute(folder))
|
||||
.map(folder => path.resolve(appDirectory, folder))
|
||||
.join(path.delimiter);
|
||||
|
||||
// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
|
||||
// injected into the application via DefinePlugin in Webpack configuration.
|
||||
const REACT_APP = /^REACT_APP_/i;
|
||||
|
||||
function getClientEnvironment(publicUrl) {
|
||||
const raw = Object.keys(process.env)
|
||||
.filter(key => REACT_APP.test(key))
|
||||
.reduce(
|
||||
(env, key) => {
|
||||
env[key] = process.env[key];
|
||||
return env;
|
||||
},
|
||||
{
|
||||
// Useful for determining whether we’re running in production mode.
|
||||
// Most importantly, it switches React into the correct mode.
|
||||
NODE_ENV: process.env.NODE_ENV || 'development',
|
||||
// Useful for resolving the correct path to static assets in `public`.
|
||||
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
|
||||
// This should only be used as an escape hatch. Normally you would put
|
||||
// images into the `src` and `import` them in code to get their paths.
|
||||
PUBLIC_URL: publicUrl,
|
||||
}
|
||||
);
|
||||
// Stringify all values so we can feed into Webpack DefinePlugin
|
||||
const stringified = {
|
||||
'process.env': Object.keys(raw).reduce((env, key) => {
|
||||
env[key] = JSON.stringify(raw[key]);
|
||||
return env;
|
||||
}, {}),
|
||||
};
|
||||
|
||||
return { raw, stringified };
|
||||
}
|
||||
|
||||
module.exports = getClientEnvironment;
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
'use strict';
|
||||
|
||||
// This is a custom Jest transformer turning style imports into empty objects.
|
||||
// http://facebook.github.io/jest/docs/en/webpack.html
|
||||
|
||||
module.exports = {
|
||||
process() {
|
||||
return 'module.exports = {};';
|
||||
},
|
||||
getCacheKey() {
|
||||
// The output is always the same.
|
||||
return 'cssTransform';
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
'use strict';
|
||||
|
||||
const path = require('path');
|
||||
|
||||
// This is a custom Jest transformer turning file imports into filenames.
|
||||
// http://facebook.github.io/jest/docs/en/webpack.html
|
||||
|
||||
module.exports = {
|
||||
process(src, filename) {
|
||||
return `module.exports = ${JSON.stringify(path.basename(filename))};`;
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
'use strict';
|
||||
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const url = require('url');
|
||||
|
||||
// Make sure any symlinks in the project folder are resolved:
|
||||
// https://github.com/facebookincubator/create-react-app/issues/637
|
||||
const appDirectory = fs.realpathSync(process.cwd());
|
||||
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
|
||||
|
||||
const envPublicUrl = process.env.PUBLIC_URL;
|
||||
|
||||
function ensureSlash(path, needsSlash) {
|
||||
const hasSlash = path.endsWith('/');
|
||||
if (hasSlash && !needsSlash) {
|
||||
return path.substr(path, path.length - 1);
|
||||
} else if (!hasSlash && needsSlash) {
|
||||
return `${path}/`;
|
||||
} else {
|
||||
return path;
|
||||
}
|
||||
}
|
||||
|
||||
const getPublicUrl = appPackageJson =>
|
||||
envPublicUrl || require(appPackageJson).homepage;
|
||||
|
||||
// We use `PUBLIC_URL` environment variable or "homepage" field to infer
|
||||
// "public path" at which the app is served.
|
||||
// Webpack needs to know it to put the right <script> hrefs into HTML even in
|
||||
// single-page apps that may serve index.html for nested URLs like /todos/42.
|
||||
// We can't use a relative path in HTML because we don't want to load something
|
||||
// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
|
||||
function getServedPath(appPackageJson) {
|
||||
const publicUrl = getPublicUrl(appPackageJson);
|
||||
const servedUrl =
|
||||
envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
|
||||
return ensureSlash(servedUrl, true);
|
||||
}
|
||||
|
||||
// config after eject: we're in ./config/
|
||||
module.exports = {
|
||||
dotenv: resolveApp('.env'),
|
||||
appBuild: resolveApp('../omis'),
|
||||
appPublic: resolveApp('public'),
|
||||
appHtml: resolveApp('public/index.html'),
|
||||
appIndexJs: resolveApp('src/index.js'),
|
||||
appPackageJson: resolveApp('package.json'),
|
||||
appSrc: resolveApp('src'),
|
||||
yarnLockFile: resolveApp('yarn.lock'),
|
||||
testsSetup: resolveApp('src/setupTests.js'),
|
||||
appNodeModules: resolveApp('node_modules'),
|
||||
publicUrl: getPublicUrl(resolveApp('package.json')),
|
||||
servedPath: getServedPath(resolveApp('package.json')),
|
||||
};
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
'use strict';
|
||||
|
||||
if (typeof Promise === 'undefined') {
|
||||
// Rejection tracking prevents a common issue where React gets into an
|
||||
// inconsistent state due to an error, but it gets swallowed by a Promise,
|
||||
// and the user has no idea what causes React's erratic future behavior.
|
||||
require('promise/lib/rejection-tracking').enable();
|
||||
window.Promise = require('promise/lib/es6-extensions.js');
|
||||
}
|
||||
|
||||
// fetch() polyfill for making API calls.
|
||||
require('whatwg-fetch');
|
||||
|
||||
// Object.assign() is commonly used with React.
|
||||
// It will use the native implementation if it's present and isn't buggy.
|
||||
Object.assign = require('object-assign');
|
||||
|
||||
// In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
|
||||
// We don't polyfill it in the browser--this is user's responsibility.
|
||||
if (process.env.NODE_ENV === 'test') {
|
||||
require('raf').polyfill(global);
|
||||
}
|
||||
|
|
@ -0,0 +1,285 @@
|
|||
'use strict';
|
||||
|
||||
const autoprefixer = require('autoprefixer');
|
||||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
|
||||
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
|
||||
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
|
||||
const eslintFormatter = require('react-dev-utils/eslintFormatter');
|
||||
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
|
||||
const getClientEnvironment = require('./env');
|
||||
const paths = require('./paths');
|
||||
const fileList = require('./entry');
|
||||
|
||||
let entry = {};
|
||||
let htmlWebpackPlugins = [];
|
||||
|
||||
fileList.forEach(function (item) {
|
||||
entry[item] = [
|
||||
require.resolve('./polyfills'),
|
||||
require.resolve('react-dev-utils/webpackHotDevClient'),
|
||||
paths.appSrc + '/' + item + '.js',
|
||||
];
|
||||
|
||||
htmlWebpackPlugins.push(
|
||||
new HtmlWebpackPlugin({
|
||||
inject: true,
|
||||
chunks: [item],
|
||||
template: paths.appHtml,
|
||||
filename: item + '.html'
|
||||
}));
|
||||
});
|
||||
|
||||
// Webpack uses `publicPath` to determine where the app is being served from.
|
||||
// In development, we always serve from the root. This makes config easier.
|
||||
const publicPath = '/';
|
||||
// `publicUrl` is just like `publicPath`, but we will provide it to our app
|
||||
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
|
||||
// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
|
||||
const publicUrl = '';
|
||||
// Get environment variables to inject into our app.
|
||||
const env = getClientEnvironment(publicUrl);
|
||||
|
||||
// This is the development configuration.
|
||||
// It is focused on developer experience and fast rebuilds.
|
||||
// The production configuration is different and lives in a separate file.
|
||||
module.exports = {
|
||||
// You may want 'eval' instead if you prefer to see the compiled output in DevTools.
|
||||
// See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
|
||||
devtool: 'cheap-module-source-map',
|
||||
// These are the "entry points" to our application.
|
||||
// This means they will be the "root" imports that are included in JS bundle.
|
||||
// The first two entry points enable "hot" CSS and auto-refreshes for JS.
|
||||
entry: entry,
|
||||
output: {
|
||||
// Add /* filename */ comments to generated require()s in the output.
|
||||
pathinfo: true,
|
||||
path: paths.appBuild,
|
||||
// This does not produce a real file. It's just the virtual path that is
|
||||
// served by WebpackDevServer in development. This is the JS bundle
|
||||
// containing code from all our entry points, and the Webpack runtime.
|
||||
filename: 'static/js/[name].bundle.js',
|
||||
// There are also additional JS chunk files if you use code splitting.
|
||||
chunkFilename: 'static/js/[name].chunk.js',
|
||||
// This is the URL that app is served from. We use "/" in development.
|
||||
publicPath: publicPath,
|
||||
// Point sourcemap entries to original disk location (format as URL on Windows)
|
||||
devtoolModuleFilenameTemplate: info =>
|
||||
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
|
||||
},
|
||||
resolve: {
|
||||
// This allows you to set a fallback for where Webpack should look for modules.
|
||||
// We placed these paths second because we want `node_modules` to "win"
|
||||
// if there are any conflicts. This matches Node resolution mechanism.
|
||||
// https://github.com/facebookincubator/create-react-app/issues/253
|
||||
modules: ['node_modules', paths.appNodeModules].concat(
|
||||
// It is guaranteed to exist because we tweak it in `env.js`
|
||||
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
|
||||
),
|
||||
// These are the reasonable defaults supported by the Node ecosystem.
|
||||
// We also include JSX as a common component filename extension to support
|
||||
// some tools, although we do not recommend using it, see:
|
||||
// https://github.com/facebookincubator/create-react-app/issues/290
|
||||
// `web` extension prefixes have been added for better support
|
||||
// for React Native Web.
|
||||
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
|
||||
alias: {
|
||||
'omi': 'omio'
|
||||
// Support React Native Web
|
||||
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
|
||||
//'react-native': 'react-native-web',
|
||||
},
|
||||
plugins: [
|
||||
// Prevents users from importing files from outside of src/ (or node_modules/).
|
||||
// This often causes confusion because we only process files within src/ with babel.
|
||||
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
|
||||
// please link the files into your node_modules/ and let module-resolution kick in.
|
||||
// Make sure your source files are compiled, as they will not be processed in any way.
|
||||
//new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
|
||||
],
|
||||
},
|
||||
module: {
|
||||
strictExportPresence: true,
|
||||
rules: [
|
||||
// TODO: Disable require.ensure as it's not a standard language feature.
|
||||
// We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
|
||||
// { parser: { requireEnsure: false } },
|
||||
|
||||
// First, run the linter.
|
||||
// It's important to do this before Babel processes the JS.
|
||||
// {
|
||||
// test: /\.(js|jsx|mjs)$/,
|
||||
// enforce: 'pre',
|
||||
// use: [
|
||||
// {
|
||||
// options: {
|
||||
// formatter: eslintFormatter,
|
||||
// eslintPath: require.resolve('eslint'),
|
||||
|
||||
// },
|
||||
// loader: require.resolve('eslint-loader'),
|
||||
// },
|
||||
// ],
|
||||
// include: paths.appSrc,
|
||||
// },
|
||||
{
|
||||
// "oneOf" will traverse all following loaders until one will
|
||||
// match the requirements. When no loader matches it will fall
|
||||
// back to the "file" loader at the end of the loader list.
|
||||
oneOf: [
|
||||
// "url" loader works like "file" loader except that it embeds assets
|
||||
// smaller than specified limit in bytes as data URLs to avoid requests.
|
||||
// A missing `test` is equivalent to a match.
|
||||
{
|
||||
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
|
||||
loader: require.resolve('url-loader'),
|
||||
options: {
|
||||
limit: 10000,
|
||||
name: 'static/media/[name].[hash:8].[ext]',
|
||||
},
|
||||
},
|
||||
// Process JS with Babel.
|
||||
{
|
||||
test: /\.(js|jsx|mjs)$/,
|
||||
//include: paths.appSrc,
|
||||
loader: require.resolve('babel-loader'),
|
||||
options: {
|
||||
|
||||
// This is a feature of `babel-loader` for webpack (not Babel itself).
|
||||
// It enables caching results in ./node_modules/.cache/babel-loader/
|
||||
// directory for faster rebuilds.
|
||||
cacheDirectory: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /[\\|\/]_[\S]*\.css$/,
|
||||
use: [
|
||||
'to-string-loader',
|
||||
'css-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.md$/,
|
||||
use: [
|
||||
'md-text-loader'
|
||||
]
|
||||
},
|
||||
// "postcss" loader applies autoprefixer to our CSS.
|
||||
// "css" loader resolves paths in CSS and adds assets as dependencies.
|
||||
// "style" loader turns CSS into JS modules that inject <style> tags.
|
||||
// In production, we use a plugin to extract that CSS to a file, but
|
||||
// in development "style" loader enables hot editing of CSS.
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
require.resolve('style-loader'),
|
||||
{
|
||||
loader: require.resolve('css-loader'),
|
||||
options: {
|
||||
importLoaders: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: require.resolve('postcss-loader'),
|
||||
options: {
|
||||
// Necessary for external CSS imports to work
|
||||
// https://github.com/facebookincubator/create-react-app/issues/2677
|
||||
ident: 'postcss',
|
||||
plugins: () => [
|
||||
require('postcss-flexbugs-fixes'),
|
||||
autoprefixer({
|
||||
browsers: [
|
||||
'>1%',
|
||||
'last 4 versions',
|
||||
'Firefox ESR',
|
||||
'not ie < 9', // React doesn't support IE8 anyway
|
||||
],
|
||||
flexbox: 'no-2009',
|
||||
}),
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
// "file" loader makes sure those assets get served by WebpackDevServer.
|
||||
// When you `import` an asset, you get its (virtual) filename.
|
||||
// In production, they would get copied to the `build` folder.
|
||||
// This loader doesn't use a "test" so it will catch all modules
|
||||
// that fall through the other loaders.
|
||||
{
|
||||
// Exclude `js` files to keep "css" loader working as it injects
|
||||
// its runtime that would otherwise processed through "file" loader.
|
||||
// Also exclude `html` and `json` extensions so they get processed
|
||||
// by webpacks internal loaders.
|
||||
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
|
||||
loader: require.resolve('file-loader'),
|
||||
options: {
|
||||
name: 'static/media/[name].[hash:8].[ext]',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
// ** STOP ** Are you adding a new loader?
|
||||
// Make sure to add the new loader(s) before the "file" loader.
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
// Makes some environment variables available in index.html.
|
||||
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
|
||||
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
// In development, this will be an empty string.
|
||||
new InterpolateHtmlPlugin(env.raw),
|
||||
...htmlWebpackPlugins,
|
||||
// Generates an `index.html` file with the <script> injected.
|
||||
// new HtmlWebpackPlugin({
|
||||
// inject: true,
|
||||
// chunks:["index"],
|
||||
// template: paths.appHtml,
|
||||
// }),
|
||||
// new HtmlWebpackPlugin({
|
||||
// inject: true,
|
||||
// chunks:["admin"],
|
||||
// template:paths.appHtml,
|
||||
// filename:'admin.html'
|
||||
// }),
|
||||
// Add module names to factory functions so they appear in browser profiler.
|
||||
new webpack.NamedModulesPlugin(),
|
||||
// Makes some environment variables available to the JS code, for example:
|
||||
// if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
|
||||
new webpack.DefinePlugin(env.stringified),
|
||||
// This is necessary to emit hot updates (currently CSS only):
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
// Watcher doesn't work well if you mistype casing in a path so we use
|
||||
// a plugin that prints an error when you attempt to do this.
|
||||
// See https://github.com/facebookincubator/create-react-app/issues/240
|
||||
new CaseSensitivePathsPlugin(),
|
||||
// If you require a missing module and then `npm install` it, you still have
|
||||
// to restart the development server for Webpack to discover it. This plugin
|
||||
// makes the discovery automatic so you don't have to restart.
|
||||
// See https://github.com/facebookincubator/create-react-app/issues/186
|
||||
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
|
||||
// Moment.js is an extremely popular library that bundles large locale files
|
||||
// by default due to how Webpack interprets its code. This is a practical
|
||||
// solution that requires the user to opt into importing specific locales.
|
||||
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
|
||||
// You can remove this if you don't use Moment.js:
|
||||
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
|
||||
],
|
||||
// Some libraries import Node modules but don't use them in the browser.
|
||||
// Tell Webpack to provide empty mocks for them so importing them works.
|
||||
node: {
|
||||
dgram: 'empty',
|
||||
fs: 'empty',
|
||||
net: 'empty',
|
||||
tls: 'empty',
|
||||
child_process: 'empty',
|
||||
},
|
||||
// Turn off performance hints during development because we don't do any
|
||||
// splitting or minification in interest of speed. These warnings become
|
||||
// cumbersome.
|
||||
performance: {
|
||||
hints: false,
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,371 @@
|
|||
'use strict';
|
||||
|
||||
const autoprefixer = require('autoprefixer');
|
||||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
const ManifestPlugin = require('webpack-manifest-plugin');
|
||||
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
|
||||
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
|
||||
const eslintFormatter = require('react-dev-utils/eslintFormatter');
|
||||
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
|
||||
const paths = require('./paths');
|
||||
const getClientEnvironment = require('./env');
|
||||
const fileList = require('./entry');
|
||||
|
||||
let entry = {};
|
||||
let htmlWebpackPlugins = [];
|
||||
|
||||
fileList.forEach(function (item) {
|
||||
entry[item] = [
|
||||
require.resolve('./polyfills'),
|
||||
paths.appSrc + '/' + item + '.js',
|
||||
];
|
||||
|
||||
htmlWebpackPlugins.push(
|
||||
new HtmlWebpackPlugin({
|
||||
inject: true,
|
||||
chunks:[item],
|
||||
template: paths.appHtml,
|
||||
filename: item + '.html',
|
||||
minify: {
|
||||
removeComments: true,
|
||||
collapseWhitespace: true,
|
||||
removeRedundantAttributes: true,
|
||||
useShortDoctype: true,
|
||||
removeEmptyAttributes: true,
|
||||
removeStyleLinkTypeAttributes: true,
|
||||
keepClosingSlash: true,
|
||||
minifyJS: true,
|
||||
minifyCSS: true,
|
||||
minifyURLs: true,
|
||||
},
|
||||
}))
|
||||
});
|
||||
|
||||
// Webpack uses `publicPath` to determine where the app is being served from.
|
||||
// It requires a trailing slash, or the file assets will get an incorrect path.
|
||||
const publicPath = paths.servedPath;
|
||||
// Some apps do not use client-side routing with pushState.
|
||||
// For these, "homepage" can be set to "." to enable relative asset paths.
|
||||
const shouldUseRelativeAssetPaths = publicPath === './';
|
||||
// Source maps are resource heavy and can cause out of memory issue for large source files.
|
||||
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
|
||||
// `publicUrl` is just like `publicPath`, but we will provide it to our app
|
||||
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
|
||||
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
|
||||
const publicUrl = publicPath.slice(0, -1);
|
||||
// Get environment variables to inject into our app.
|
||||
const env = getClientEnvironment(publicUrl);
|
||||
|
||||
// Assert this just to be safe.
|
||||
// Development builds of React are slow and not intended for production.
|
||||
if (env.stringified['process.env'].NODE_ENV !== '"production"') {
|
||||
throw new Error('Production builds must have NODE_ENV=production.');
|
||||
}
|
||||
|
||||
// Note: defined here because it will be used more than once.
|
||||
const cssFilename = 'static/css/[name].[contenthash:8].css';
|
||||
|
||||
// ExtractTextPlugin expects the build output to be flat.
|
||||
// (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
|
||||
// However, our output is structured with css, js and media folders.
|
||||
// To have this structure working with relative paths, we have to use custom options.
|
||||
const extractTextPluginOptions = shouldUseRelativeAssetPaths
|
||||
? // Making sure that the publicPath goes back to to build folder.
|
||||
{ publicPath: Array(cssFilename.split('/').length).join('../') }
|
||||
: {};
|
||||
|
||||
// This is the production configuration.
|
||||
// It compiles slowly and is focused on producing a fast and minimal bundle.
|
||||
// The development configuration is different and lives in a separate file.
|
||||
module.exports = {
|
||||
// Don't attempt to continue if there are any errors.
|
||||
bail: true,
|
||||
// We generate sourcemaps in production. This is slow but gives good results.
|
||||
// You can exclude the *.map files from the build during deployment.
|
||||
devtool: shouldUseSourceMap ? 'source-map' : false,
|
||||
// In production, we only want to load the polyfills and the app code.
|
||||
entry: entry,
|
||||
output: {
|
||||
// The build folder.
|
||||
path: paths.appBuild,
|
||||
// Generated JS file names (with nested folders).
|
||||
// There will be one main bundle, and one file per asynchronous chunk.
|
||||
// We don't currently advertise code splitting but Webpack supports it.
|
||||
filename: 'static/js/[name].[chunkhash:8].js',
|
||||
chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
|
||||
// We inferred the "public path" (such as / or /my-project) from homepage.
|
||||
publicPath: publicPath,
|
||||
// Point sourcemap entries to original disk location (format as URL on Windows)
|
||||
devtoolModuleFilenameTemplate: info =>
|
||||
path
|
||||
.relative(paths.appSrc, info.absoluteResourcePath)
|
||||
.replace(/\\/g, '/'),
|
||||
},
|
||||
resolve: {
|
||||
// This allows you to set a fallback for where Webpack should look for modules.
|
||||
// We placed these paths second because we want `node_modules` to "win"
|
||||
// if there are any conflicts. This matches Node resolution mechanism.
|
||||
// https://github.com/facebookincubator/create-react-app/issues/253
|
||||
modules: ['node_modules', paths.appNodeModules].concat(
|
||||
// It is guaranteed to exist because we tweak it in `env.js`
|
||||
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
|
||||
),
|
||||
// These are the reasonable defaults supported by the Node ecosystem.
|
||||
// We also include JSX as a common component filename extension to support
|
||||
// some tools, although we do not recommend using it, see:
|
||||
// https://github.com/facebookincubator/create-react-app/issues/290
|
||||
// `web` extension prefixes have been added for better support
|
||||
// for React Native Web.
|
||||
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
|
||||
alias: {
|
||||
'omi': 'omio'
|
||||
// Support React Native Web
|
||||
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
|
||||
//'react-native': 'react-native-web',
|
||||
},
|
||||
plugins: [
|
||||
// Prevents users from importing files from outside of src/ (or node_modules/).
|
||||
// This often causes confusion because we only process files within src/ with babel.
|
||||
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
|
||||
// please link the files into your node_modules/ and let module-resolution kick in.
|
||||
// Make sure your source files are compiled, as they will not be processed in any way.
|
||||
//new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
|
||||
],
|
||||
},
|
||||
module: {
|
||||
strictExportPresence: true,
|
||||
rules: [
|
||||
// TODO: Disable require.ensure as it's not a standard language feature.
|
||||
// We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
|
||||
// { parser: { requireEnsure: false } },
|
||||
|
||||
// First, run the linter.
|
||||
// It's important to do this before Babel processes the JS.
|
||||
// {
|
||||
// test: /\.(js|jsx|mjs)$/,
|
||||
// enforce: 'pre',
|
||||
// use: [
|
||||
// {
|
||||
// options: {
|
||||
// formatter: eslintFormatter,
|
||||
// eslintPath: require.resolve('eslint'),
|
||||
|
||||
// },
|
||||
// loader: require.resolve('eslint-loader'),
|
||||
// },
|
||||
// ],
|
||||
// include: paths.appSrc,
|
||||
// },
|
||||
{
|
||||
// "oneOf" will traverse all following loaders until one will
|
||||
// match the requirements. When no loader matches it will fall
|
||||
// back to the "file" loader at the end of the loader list.
|
||||
oneOf: [
|
||||
// "url" loader works just like "file" loader but it also embeds
|
||||
// assets smaller than specified size as data URLs to avoid requests.
|
||||
{
|
||||
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
|
||||
loader: require.resolve('url-loader'),
|
||||
options: {
|
||||
limit: 10000,
|
||||
name: 'static/media/[name].[hash:8].[ext]',
|
||||
},
|
||||
},
|
||||
// Process JS with Babel.
|
||||
{
|
||||
test: /\.(js|jsx|mjs)$/,
|
||||
//include: paths.appSrc,
|
||||
loader: require.resolve('babel-loader'),
|
||||
options: {
|
||||
|
||||
compact: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /[\\|\/]_[\S]*\.css$/,
|
||||
use: [
|
||||
'to-string-loader',
|
||||
'css-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.md$/,
|
||||
use: [
|
||||
'md-text-loader'
|
||||
]
|
||||
},
|
||||
// The notation here is somewhat confusing.
|
||||
// "postcss" loader applies autoprefixer to our CSS.
|
||||
// "css" loader resolves paths in CSS and adds assets as dependencies.
|
||||
// "style" loader normally turns CSS into JS modules injecting <style>,
|
||||
// but unlike in development configuration, we do something different.
|
||||
// `ExtractTextPlugin` first applies the "postcss" and "css" loaders
|
||||
// (second argument), then grabs the result CSS and puts it into a
|
||||
// separate file in our build process. This way we actually ship
|
||||
// a single CSS file in production instead of JS code injecting <style>
|
||||
// tags. If you use code splitting, however, any async bundles will still
|
||||
// use the "style" loader inside the async code so CSS from them won't be
|
||||
// in the main CSS file.
|
||||
{
|
||||
test: /\.css$/,
|
||||
loader: ExtractTextPlugin.extract(
|
||||
Object.assign(
|
||||
{
|
||||
fallback: {
|
||||
loader: require.resolve('style-loader'),
|
||||
options: {
|
||||
hmr: false,
|
||||
},
|
||||
},
|
||||
use: [
|
||||
{
|
||||
loader: require.resolve('css-loader'),
|
||||
options: {
|
||||
importLoaders: 1,
|
||||
minimize: true,
|
||||
sourceMap: shouldUseSourceMap,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: require.resolve('postcss-loader'),
|
||||
options: {
|
||||
// Necessary for external CSS imports to work
|
||||
// https://github.com/facebookincubator/create-react-app/issues/2677
|
||||
ident: 'postcss',
|
||||
plugins: () => [
|
||||
require('postcss-flexbugs-fixes'),
|
||||
autoprefixer({
|
||||
browsers: [
|
||||
'>1%',
|
||||
'last 4 versions',
|
||||
'Firefox ESR',
|
||||
'not ie < 9', // React doesn't support IE8 anyway
|
||||
],
|
||||
flexbox: 'no-2009',
|
||||
}),
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
extractTextPluginOptions
|
||||
)
|
||||
),
|
||||
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
|
||||
},
|
||||
// "file" loader makes sure assets end up in the `build` folder.
|
||||
// When you `import` an asset, you get its filename.
|
||||
// This loader doesn't use a "test" so it will catch all modules
|
||||
// that fall through the other loaders.
|
||||
{
|
||||
loader: require.resolve('file-loader'),
|
||||
// Exclude `js` files to keep "css" loader working as it injects
|
||||
// it's runtime that would otherwise processed through "file" loader.
|
||||
// Also exclude `html` and `json` extensions so they get processed
|
||||
// by webpacks internal loaders.
|
||||
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
|
||||
options: {
|
||||
name: 'static/media/[name].[hash:8].[ext]',
|
||||
},
|
||||
},
|
||||
// ** STOP ** Are you adding a new loader?
|
||||
// Make sure to add the new loader(s) before the "file" loader.
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
// Makes some environment variables available in index.html.
|
||||
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
|
||||
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
// In production, it will be an empty string unless you specify "homepage"
|
||||
// in `package.json`, in which case it will be the pathname of that URL.
|
||||
new InterpolateHtmlPlugin(env.raw),
|
||||
// Generates an `index.html` file with the <script> injected.
|
||||
...htmlWebpackPlugins,
|
||||
// Makes some environment variables available to the JS code, for example:
|
||||
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
|
||||
// It is absolutely essential that NODE_ENV was set to production here.
|
||||
// Otherwise React will be compiled in the very slow development mode.
|
||||
new webpack.DefinePlugin(env.stringified),
|
||||
// Minify the code.
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false,
|
||||
// Disabled because of an issue with Uglify breaking seemingly valid code:
|
||||
// https://github.com/facebookincubator/create-react-app/issues/2376
|
||||
// Pending further investigation:
|
||||
// https://github.com/mishoo/UglifyJS2/issues/2011
|
||||
comparisons: false,
|
||||
},
|
||||
mangle: {
|
||||
safari10: true,
|
||||
},
|
||||
output: {
|
||||
comments: false,
|
||||
// Turned on because emoji and regex is not minified properly using default
|
||||
// https://github.com/facebookincubator/create-react-app/issues/2488
|
||||
ascii_only: true,
|
||||
},
|
||||
sourceMap: shouldUseSourceMap,
|
||||
}),
|
||||
// Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
|
||||
new ExtractTextPlugin({
|
||||
filename: cssFilename,
|
||||
}),
|
||||
// Generate a manifest file which contains a mapping of all asset filenames
|
||||
// to their corresponding output file so that tools can pick it up without
|
||||
// having to parse `index.html`.
|
||||
new ManifestPlugin({
|
||||
fileName: 'asset-manifest.json',
|
||||
}),
|
||||
// Generate a service worker script that will precache, and keep up to date,
|
||||
// the HTML & assets that are part of the Webpack build.
|
||||
new SWPrecacheWebpackPlugin({
|
||||
// By default, a cache-busting query parameter is appended to requests
|
||||
// used to populate the caches, to ensure the responses are fresh.
|
||||
// If a URL is already hashed by Webpack, then there is no concern
|
||||
// about it being stale, and the cache-busting can be skipped.
|
||||
dontCacheBustUrlsMatching: /\.\w{8}\./,
|
||||
filename: 'service-worker.js',
|
||||
logger(message) {
|
||||
if (message.indexOf('Total precache size is') === 0) {
|
||||
// This message occurs for every build and is a bit too noisy.
|
||||
return;
|
||||
}
|
||||
if (message.indexOf('Skipping static resource') === 0) {
|
||||
// This message obscures real errors so we ignore it.
|
||||
// https://github.com/facebookincubator/create-react-app/issues/2612
|
||||
return;
|
||||
}
|
||||
console.log(message);
|
||||
},
|
||||
minify: true,
|
||||
// For unknown URLs, fallback to the index page
|
||||
navigateFallback: publicUrl + '/index.html',
|
||||
// Ignores URLs starting from /__ (useful for Firebase):
|
||||
// https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
|
||||
navigateFallbackWhitelist: [/^(?!\/__).*/],
|
||||
// Don't precache sourcemaps (they're large) and build asset manifest:
|
||||
staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
|
||||
}),
|
||||
// Moment.js is an extremely popular library that bundles large locale files
|
||||
// by default due to how Webpack interprets its code. This is a practical
|
||||
// solution that requires the user to opt into importing specific locales.
|
||||
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
|
||||
// You can remove this if you don't use Moment.js:
|
||||
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
|
||||
],
|
||||
// Some libraries import Node modules but don't use them in the browser.
|
||||
// Tell Webpack to provide empty mocks for them so importing them works.
|
||||
node: {
|
||||
dgram: 'empty',
|
||||
fs: 'empty',
|
||||
net: 'empty',
|
||||
tls: 'empty',
|
||||
child_process: 'empty',
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
'use strict';
|
||||
|
||||
const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
|
||||
const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
|
||||
const ignoredFiles = require('react-dev-utils/ignoredFiles');
|
||||
const config = require('./webpack.config.dev');
|
||||
const paths = require('./paths');
|
||||
|
||||
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
|
||||
const host = process.env.HOST || '0.0.0.0';
|
||||
|
||||
// const fileList = require('./entry');
|
||||
|
||||
// let rewrites = [];
|
||||
|
||||
// fileList.forEach(function (item) {
|
||||
|
||||
// rewrites.push({ from: new RegExp('^\/' + item + '.html', 'g'), to: '/build/' + item + '.html' })
|
||||
|
||||
// });
|
||||
|
||||
|
||||
|
||||
module.exports = function(proxy, allowedHost) {
|
||||
return {
|
||||
// WebpackDevServer 2.4.3 introduced a security fix that prevents remote
|
||||
// websites from potentially accessing local content through DNS rebinding:
|
||||
// https://github.com/webpack/webpack-dev-server/issues/887
|
||||
// https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
|
||||
// However, it made several existing use cases such as development in cloud
|
||||
// environment or subdomains in development significantly more complicated:
|
||||
// https://github.com/facebookincubator/create-react-app/issues/2271
|
||||
// https://github.com/facebookincubator/create-react-app/issues/2233
|
||||
// While we're investigating better solutions, for now we will take a
|
||||
// compromise. Since our WDS configuration only serves files in the `public`
|
||||
// folder we won't consider accessing them a vulnerability. However, if you
|
||||
// use the `proxy` feature, it gets more dangerous because it can expose
|
||||
// remote code execution vulnerabilities in backends like Django and Rails.
|
||||
// So we will disable the host check normally, but enable it if you have
|
||||
// specified the `proxy` setting. Finally, we let you override it if you
|
||||
// really know what you're doing with a special environment variable.
|
||||
disableHostCheck:
|
||||
!proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
|
||||
// Enable gzip compression of generated files.
|
||||
compress: true,
|
||||
// Silence WebpackDevServer's own logs since they're generally not useful.
|
||||
// It will still show compile warnings and errors with this setting.
|
||||
clientLogLevel: 'none',
|
||||
// By default WebpackDevServer serves physical files from current directory
|
||||
// in addition to all the virtual build products that it serves from memory.
|
||||
// This is confusing because those files won’t automatically be available in
|
||||
// production build folder unless we copy them. However, copying the whole
|
||||
// project directory is dangerous because we may expose sensitive files.
|
||||
// Instead, we establish a convention that only files in `public` directory
|
||||
// get served. Our build script will copy `public` into the `build` folder.
|
||||
// In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
|
||||
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
// In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
|
||||
// Note that we only recommend to use `public` folder as an escape hatch
|
||||
// for files like `favicon.ico`, `manifest.json`, and libraries that are
|
||||
// for some reason broken when imported through Webpack. If you just want to
|
||||
// use an image, put it in `src` and `import` it from JavaScript instead.
|
||||
contentBase: paths.appPublic,
|
||||
// By default files from `contentBase` will not trigger a page reload.
|
||||
watchContentBase: true,
|
||||
// Enable hot reloading server. It will provide /sockjs-node/ endpoint
|
||||
// for the WebpackDevServer client so it can learn when the files were
|
||||
// updated. The WebpackDevServer client is included as an entry point
|
||||
// in the Webpack development configuration. Note that only changes
|
||||
// to CSS are currently hot reloaded. JS changes will refresh the browser.
|
||||
hot: true,
|
||||
// It is important to tell WebpackDevServer to use the same "root" path
|
||||
// as we specified in the config. In development, we always serve from /.
|
||||
publicPath: config.output.publicPath,
|
||||
// WebpackDevServer is noisy by default so we emit custom message instead
|
||||
// by listening to the compiler events with `compiler.plugin` calls above.
|
||||
quiet: true,
|
||||
// Reportedly, this avoids CPU overload on some systems.
|
||||
// https://github.com/facebookincubator/create-react-app/issues/293
|
||||
// src/node_modules is not ignored to support absolute imports
|
||||
// https://github.com/facebookincubator/create-react-app/issues/1065
|
||||
watchOptions: {
|
||||
ignored: ignoredFiles(paths.appSrc),
|
||||
},
|
||||
// Enable HTTPS if the HTTPS environment variable is set to 'true'
|
||||
https: protocol === 'https',
|
||||
host: host,
|
||||
overlay: false,
|
||||
historyApiFallback: {
|
||||
// Paths with dots should still use the history fallback.
|
||||
// See https://github.com/facebookincubator/create-react-app/issues/387.
|
||||
disableDotRule: true
|
||||
//rewrites: rewrites
|
||||
},
|
||||
public: allowedHost,
|
||||
proxy,
|
||||
before(app) {
|
||||
// This lets us open files from the runtime error overlay.
|
||||
app.use(errorOverlayMiddleware());
|
||||
// This service worker file is effectively a 'no-op' that will reset any
|
||||
// previous service worker registered for the same host:port combination.
|
||||
// We do this in development to avoid hitting the production cache if
|
||||
// it used the same host and port.
|
||||
// https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
|
||||
app.use(noopServiceWorkerMiddleware());
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
{
|
||||
"name": "my-app",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"autoprefixer": "7.1.6",
|
||||
"babel-core": "6.26.0",
|
||||
"babel-eslint": "7.2.3",
|
||||
"babel-jest": "20.0.3",
|
||||
"babel-loader": "7.1.2",
|
||||
"babel-plugin-syntax-dynamic-import": "^6.18.0",
|
||||
"babel-plugin-transform-class-properties": "^6.24.1",
|
||||
"babel-plugin-transform-decorators-legacy": "^1.3.5",
|
||||
"babel-plugin-transform-function-bind": "^6.22.0",
|
||||
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
||||
"babel-preset-env": "^1.6.1",
|
||||
"babel-preset-omi": "^0.1.1",
|
||||
"babel-runtime": "6.26.0",
|
||||
"case-sensitive-paths-webpack-plugin": "2.1.1",
|
||||
"chalk": "1.1.3",
|
||||
"classnames": "^2.2.6",
|
||||
"css-loader": "0.28.7",
|
||||
"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": "3.0.2",
|
||||
"file-loader": "1.1.5",
|
||||
"fs-extra": "3.0.1",
|
||||
"html-webpack-plugin": "2.29.0",
|
||||
"jest": "20.0.4",
|
||||
"md-text-loader": "^0.1.0",
|
||||
"object-assign": "4.1.1",
|
||||
"omi": "latest",
|
||||
"omi-router": "latest",
|
||||
"omio": "latest",
|
||||
"path-d": "0.0.1",
|
||||
"postcss-flexbugs-fixes": "3.2.0",
|
||||
"postcss-loader": "2.0.8",
|
||||
"prettier": "^1.14.3",
|
||||
"promise": "8.0.1",
|
||||
"prop-types": "^15.5.8",
|
||||
"raf": "3.4.0",
|
||||
"react-dev-utils": "^5.0.1",
|
||||
"resolve": "1.6.0",
|
||||
"style-loader": "0.19.0",
|
||||
"sw-precache-webpack-plugin": "0.11.4",
|
||||
"to-string-loader": "^1.1.5",
|
||||
"url-loader": "0.6.2",
|
||||
"warning": "^3.0.0",
|
||||
"webpack": "3.8.1",
|
||||
"webpack-dev-server": "2.9.4",
|
||||
"webpack-manifest-plugin": "1.3.2",
|
||||
"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": [
|
||||
"env",
|
||||
"omi"
|
||||
],
|
||||
"plugins": [
|
||||
"transform-class-properties",
|
||||
"transform-decorators-legacy",
|
||||
"transform-object-rest-spread",
|
||||
"syntax-dynamic-import",
|
||||
"transform-function-bind"
|
||||
]
|
||||
},
|
||||
"prettier": {
|
||||
"singleQuote": true,
|
||||
"semi": false,
|
||||
"tabWidth": 2,
|
||||
"useTabs": false
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
|
|
@ -0,0 +1,218 @@
|
|||
/* PrismJS 1.15.0
|
||||
https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+bash+json+typescript+jsx+tsx&plugins=line-highlight+line-numbers */
|
||||
/**
|
||||
* okaidia theme for JavaScript, CSS and HTML
|
||||
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
|
||||
* @author ocodia
|
||||
*/
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: #f8f8f2;
|
||||
background: none;
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #272822;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #f92672;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: #ae81ff;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #a6e22e;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #e6db74;
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #66d9ef;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: #fd971f;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
pre[data-line] {
|
||||
position: relative;
|
||||
padding: 1em 0 1em 3em;
|
||||
}
|
||||
|
||||
.line-highlight {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: inherit 0;
|
||||
margin-top: 1em; /* Same as .prism’s padding-top */
|
||||
|
||||
background: hsla(24, 20%, 50%,.08);
|
||||
background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
line-height: inherit;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.line-highlight:before,
|
||||
.line-highlight[data-end]:after {
|
||||
content: attr(data-start);
|
||||
position: absolute;
|
||||
top: .4em;
|
||||
left: .6em;
|
||||
min-width: 1em;
|
||||
padding: 0 .5em;
|
||||
background-color: hsla(24, 20%, 50%,.4);
|
||||
color: hsl(24, 20%, 95%);
|
||||
font: bold 65%/1.5 sans-serif;
|
||||
text-align: center;
|
||||
vertical-align: .3em;
|
||||
border-radius: 999px;
|
||||
text-shadow: none;
|
||||
box-shadow: 0 1px white;
|
||||
}
|
||||
|
||||
.line-highlight[data-end]:after {
|
||||
content: attr(data-end);
|
||||
top: auto;
|
||||
bottom: .4em;
|
||||
}
|
||||
|
||||
.line-numbers .line-highlight:before,
|
||||
.line-numbers .line-highlight:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"].line-numbers {
|
||||
position: relative;
|
||||
padding-left: 3.8em;
|
||||
counter-reset: linenumber;
|
||||
}
|
||||
|
||||
pre[class*="language-"].line-numbers > code {
|
||||
position: relative;
|
||||
white-space: inherit;
|
||||
}
|
||||
|
||||
.line-numbers .line-numbers-rows {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
font-size: 100%;
|
||||
left: -3.8em;
|
||||
width: 3em; /* works for line-numbers below 1000 lines */
|
||||
letter-spacing: -1px;
|
||||
border-right: 1px solid #999;
|
||||
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
}
|
||||
|
||||
.line-numbers-rows > span {
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
counter-increment: linenumber;
|
||||
}
|
||||
|
||||
.line-numbers-rows > span:before {
|
||||
content: counter(linenumber);
|
||||
color: #999;
|
||||
display: block;
|
||||
padding-right: 0.8em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is added to the
|
||||
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||
-->
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
<link rel="stylesheet" href="%PUBLIC_URL%/highlight/prism.css">
|
||||
<style>
|
||||
*{
|
||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
||||
-moz-user-focus: none;
|
||||
}
|
||||
</style>
|
||||
<!--
|
||||
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>Omi - Next Front End Framework</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
|
||||
<script src="%PUBLIC_URL%/highlight/prism.js"></script>
|
||||
<script src="%PUBLIC_URL%/js/remarkable.min.js"></script>
|
||||
<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>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
data = {
|
||||
ios_show: false,
|
||||
android_show: false,
|
||||
menus: [{
|
||||
label: 'Option 1',
|
||||
onClick: () => { }
|
||||
}, {
|
||||
label: 'Option 2',
|
||||
onClick: () => { }
|
||||
}],
|
||||
actions: [
|
||||
{
|
||||
label: 'Cancel',
|
||||
onClick: this.hide
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
hide = () => {
|
||||
Object.assign(this.data, {
|
||||
auto_show: false,
|
||||
ios_show: false,
|
||||
android_show: false,
|
||||
})
|
||||
this.update()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<o-button type="default"
|
||||
onClick={e => { this.data.ios_show = true; this.update(); }}
|
||||
>
|
||||
IOS ActionSheet</o-button>
|
||||
<o-action-sheet
|
||||
menus={this.data.menus}
|
||||
actions={this.data.actions}
|
||||
show={this.data.ios_show}
|
||||
type="ios"
|
||||
onClose={e => { this.data.ios_show = false; this.update(); }}
|
||||
/>
|
||||
|
||||
<br />
|
||||
|
||||
<o-button type="default"
|
||||
onClick={e => { this.data.android_show = true; this.update(); }}>
|
||||
Android ActionSheet
|
||||
</o-button>
|
||||
<o-action-sheet
|
||||
menus={this.data.menus}
|
||||
actions={this.data.actions}
|
||||
show={this.data.android_show}
|
||||
type="android"
|
||||
onClose={e => { this.data.android_show = false; this.update(); }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')
|
||||
</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
render() {
|
||||
return (
|
||||
<o-equal-space>
|
||||
<o-badge content={8}>
|
||||
<o-icon type="chat" isFill color="#07C160" />
|
||||
</o-badge>
|
||||
|
||||
<o-badge content={99}>
|
||||
<o-icon type="pay" isFill color="#07C160" />
|
||||
</o-badge>
|
||||
|
||||
<o-badge content="new">
|
||||
<o-icon type="github" isFill color="black" />
|
||||
</o-badge>
|
||||
</o-equal-space>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
render(props, data) {
|
||||
return (
|
||||
<div>
|
||||
<o-button
|
||||
onClick={() => {
|
||||
console.log('Hello button!')
|
||||
}}
|
||||
>
|
||||
Normal
|
||||
</o-button>
|
||||
<o-button disabled>Disabled</o-button>
|
||||
|
||||
<o-button type="default">Default Normal</o-button>
|
||||
<o-button type="default" disabled>
|
||||
Default Disabled
|
||||
</o-button>
|
||||
|
||||
<o-button type="warn">Warn Normal</o-button>
|
||||
<o-button type="warn" disabled>
|
||||
Disabled
|
||||
</o-button>
|
||||
|
||||
<o-equal-space itemMargin='10px'>
|
||||
<o-button type="default" plain>
|
||||
Default Plain
|
||||
</o-button>
|
||||
<o-button type="primary" plain>
|
||||
Primary Plain
|
||||
</o-button>
|
||||
</o-equal-space>
|
||||
|
||||
<o-button type="primary" plain disabled>
|
||||
Primary Plain Disabled
|
||||
</o-button>
|
||||
|
||||
<o-equal-space style='margin-top:10px;background-color:#ddd;'>
|
||||
<o-button size="small">Mini</o-button>
|
||||
<o-button type="default" size="small">
|
||||
Mini
|
||||
</o-button>
|
||||
<o-button type="warn" size="small">
|
||||
Mini
|
||||
</o-button>
|
||||
</o-equal-space>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<o-checkbox checked label='abc'></o-checkbox>
|
||||
<o-checkbox label='abc'></o-checkbox>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
showPicker = false
|
||||
|
||||
selectedDate = '2019-1-10'
|
||||
|
||||
onToggle = () => {
|
||||
this.showPicker = !this.showPicker
|
||||
this.update()
|
||||
}
|
||||
|
||||
onSelect = (date) => {
|
||||
this.selectDate = date
|
||||
this.showPicker = false
|
||||
this.update()
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<o-date-picker
|
||||
selectedDate={this.selectedDate}
|
||||
onSelect={this.onSelect}
|
||||
show={this.showPicker}
|
||||
onToggle={this.onToggle}>
|
||||
</o-date-picker>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,203 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
alertShow = false
|
||||
confirmShow = false
|
||||
|
||||
onClose = (e) => {
|
||||
this.confirmShow = false
|
||||
this.alertShow = false
|
||||
this.update()
|
||||
}
|
||||
|
||||
onConfirm = (e) => {
|
||||
this.confirmShow = false
|
||||
this.alertShow = false
|
||||
this.update()
|
||||
}
|
||||
|
||||
showAlert = (e) => {
|
||||
this.alertShow = true
|
||||
this.update()
|
||||
}
|
||||
|
||||
showConfirm = (e) => {
|
||||
this.confirmShow = true
|
||||
this.update()
|
||||
}
|
||||
|
||||
render(props, data) {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<o-button onClick={this.showAlert}>Show Alert</o-button>
|
||||
<o-button onClick={this.showConfirm}>Show Confirm</o-button>
|
||||
<o-dialog
|
||||
onClose={this.onClose}
|
||||
type='confirm'
|
||||
onConfirm={this.onConfirm}
|
||||
show={this.confirmShow}
|
||||
title='My Confirm!'
|
||||
msg='My Msg!'
|
||||
cancelText='cancel'
|
||||
confirmText='confirm'
|
||||
/>
|
||||
<o-dialog
|
||||
onClose={this.onClose}
|
||||
type='alert'
|
||||
onConfirm={this.onConfirm}
|
||||
show={this.alertShow}
|
||||
title='My Title'
|
||||
msg='My Alert!'
|
||||
confirmText='OK'
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">const path = {
|
||||
pathA: 'M464 512a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm200 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm-400 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm661.2-173.6c-22.6-53.7-55-101.9-96.3-143.3a444.35 444.35 0 0 0-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9a445.35 445.35 0 0 0-142 96.5c-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9A449.4 449.4 0 0 0 112 714v152a46 46 0 0 0 46 46h152.1A449.4 449.4 0 0 0 510 960h2.1c59.9 0 118-11.6 172.7-34.3a444.48 444.48 0 0 0 142.8-95.2c41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z',
|
||||
pathB: 'M678.3 642.4c24.2-13 51.9-20.4 81.4-20.4h.1c3 0 4.4-3.6 2.2-5.6a371.67 371.67 0 0 0-103.7-65.8c-.4-.2-.8-.3-1.2-.5C719.2 505 759.6 431.7 759.6 349c0-137-110.8-248-247.5-248S264.7 212 264.7 349c0 82.7 40.4 156 102.6 201.1-.4.2-.8.3-1.2.5-44.7 18.9-84.8 46-119.3 80.6a373.42 373.42 0 0 0-80.4 119.5A373.6 373.6 0 0 0 137 888.8a8 8 0 0 0 8 8.2h59.9c4.3 0 7.9-3.5 8-7.8 2-77.2 32.9-149.5 87.6-204.3C357 628.2 432.2 597 512.2 597c56.7 0 111.1 15.7 158 45.1a8.1 8.1 0 0 0 8.1.3zM512.2 521c-45.8 0-88.9-17.9-121.4-50.4A171.2 171.2 0 0 1 340.5 349c0-45.9 17.9-89.1 50.3-121.6S466.3 177 512.2 177s88.9 17.9 121.4 50.4A171.2 171.2 0 0 1 683.9 349c0 45.9-17.9 89.1-50.3 121.6C601.1 503.1 558 521 512.2 521zM880 759h-84v-84c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v84h-84c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h84v84c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-84h84c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z',
|
||||
pathC: 'M136 384h56c4.4 0 8-3.6 8-8V200h176c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H196c-37.6 0-68 30.4-68 68v180c0 4.4 3.6 8 8 8zm512-184h176v176c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V196c0-37.6-30.4-68-68-68H648c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zM376 824H200V648c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v180c0 37.6 30.4 68 68 68h180c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm512-184h-56c-4.4 0-8 3.6-8 8v176H648c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h180c37.6 0 68-30.4 68-68V648c0-4.4-3.6-8-8-8zm16-164H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z',
|
||||
pathD: 'M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372zm159.6-585h-59.5c-3 0-5.8 1.7-7.1 4.4l-90.6 180H511l-90.6-180a8 8 0 0 0-7.1-4.4h-60.7c-1.3 0-2.6.3-3.8 1-3.9 2.1-5.3 7-3.2 10.9L457 515.7h-61.4c-4.4 0-8 3.6-8 8v29.9c0 4.4 3.6 8 8 8h81.7V603h-81.7c-4.4 0-8 3.6-8 8v29.9c0 4.4 3.6 8 8 8h81.7V717c0 4.4 3.6 8 8 8h54.3c4.4 0 8-3.6 8-8v-68.1h82c4.4 0 8-3.6 8-8V611c0-4.4-3.6-8-8-8h-82v-41.5h82c4.4 0 8-3.6 8-8v-29.9c0-4.4-3.6-8-8-8h-62l111.1-204.8c.6-1.2 1-2.5 1-3.8-.1-4.4-3.7-8-8.1-8z'
|
||||
}
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
render() {
|
||||
return (
|
||||
<o-dropdown-menu >
|
||||
<item icon={{ path: path.pathA, color: '#F2F2F2' }} text='发起群聊'></item>
|
||||
<item icon={{ path: path.pathB, color: '#F2F2F2' }} text='添加朋友'></item>
|
||||
<item icon={{ path: path.pathC, color: '#F2F2F2' }} text='扫一扫吧'></item>
|
||||
<item icon={{ path: path.pathD, color: '#F2F2F2' }} text='收款支付'></item>
|
||||
</o-dropdown-menu>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
showSelect = false
|
||||
|
||||
selectedIndex = 1
|
||||
|
||||
onSelect = (index) => {
|
||||
this.selectedIndex = index
|
||||
this.showSelect = false
|
||||
this.update()
|
||||
}
|
||||
|
||||
onToggle = () => {
|
||||
this.showSelect = !this.showSelect
|
||||
this.update()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<o-dropdown selectedIndex={this.selectedIndex}
|
||||
show={this.showSelect}
|
||||
onToggle={this.onToggle}
|
||||
onSelect={this.onSelect} style="width:200px;">
|
||||
<item value={1}>Item 1</item>
|
||||
<item value={2}>Item 2</item>
|
||||
<item value={3}>Item 3</item>
|
||||
</o-dropdown>
|
||||
</div>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')
|
||||
</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,188 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
css() {
|
||||
return `
|
||||
div{
|
||||
height:80px;
|
||||
}
|
||||
|
||||
.a{
|
||||
background-color: #07C160;
|
||||
}
|
||||
|
||||
.b{
|
||||
background-color: #FEFEFE;
|
||||
}
|
||||
|
||||
.c{
|
||||
background-color: #171717;
|
||||
}
|
||||
|
||||
.d{
|
||||
background-color: #ECECEC;
|
||||
}
|
||||
|
||||
.e{
|
||||
background-color: #F95050;
|
||||
}
|
||||
`
|
||||
}
|
||||
render(props, data) {
|
||||
return (
|
||||
<o-equal-space style='margin: 0;padding: 0;'>
|
||||
<div class='a'></div>
|
||||
<div class='b'></div>
|
||||
<div class='c'></div>
|
||||
<div class='d'></div>
|
||||
<div class='e'></div>
|
||||
</o-equal-space>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,196 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<o-icon
|
||||
path='M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z'>
|
||||
</o-icon>
|
||||
<o-icon paths={[{
|
||||
color: '#F98080',
|
||||
path: 'M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z'
|
||||
}, {
|
||||
color: '#F95050',
|
||||
path: 'M464 688a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z'
|
||||
}]}></o-icon>
|
||||
<o-icon type="loading" rotate isFill />
|
||||
<o-icon type="close" isFill />
|
||||
<o-icon type="pay" isFill />
|
||||
<o-icon type="chat" isFill />
|
||||
<o-icon type="scan" isFill />
|
||||
<o-icon type="add-friend" isFill />
|
||||
|
||||
<o-equal-space>
|
||||
<o-icon type="loading" rotate isFill>
|
||||
Loading
|
||||
</o-icon>
|
||||
<o-icon type="close" isFill>
|
||||
Close
|
||||
</o-icon>
|
||||
<o-icon type="pay" isFill>
|
||||
Pay
|
||||
</o-icon>
|
||||
</o-equal-space>
|
||||
|
||||
<o-equal-space>
|
||||
<o-icon type="loading" color='#07C160' rotate isFill>
|
||||
Loading
|
||||
</o-icon>
|
||||
<o-icon type="close" color='#07C160' isFill>
|
||||
Close
|
||||
</o-icon>
|
||||
<o-icon type="pay" color='#07C160' isFill>
|
||||
Pay
|
||||
</o-icon>
|
||||
</o-equal-space>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
render(props, data) {
|
||||
return (
|
||||
<div>
|
||||
<o-button
|
||||
onClick={() => {
|
||||
console.log('Hello button!')
|
||||
}}
|
||||
>
|
||||
Normal
|
||||
</o-button>
|
||||
<o-button disabled>Disabled</o-button>
|
||||
|
||||
<o-button type="default">Default Normal</o-button>
|
||||
<o-button type="default" disabled>
|
||||
Default Disabled
|
||||
</o-button>
|
||||
|
||||
<o-button type="warn">Warn Normal</o-button>
|
||||
<o-button type="warn" disabled>
|
||||
Disabled
|
||||
</o-button>
|
||||
|
||||
<o-equal-space itemMargin='10px'>
|
||||
<o-button type="default" plain>
|
||||
Default Plain
|
||||
</o-button>
|
||||
<o-button type="primary" plain>
|
||||
Primary Plain
|
||||
</o-button>
|
||||
</o-equal-space>
|
||||
|
||||
<o-button type="primary" plain disabled>
|
||||
Primary Plain Disabled
|
||||
</o-button>
|
||||
|
||||
<o-equal-space style='margin-top:10px;background-color:#ddd;'>
|
||||
<o-button size="small">Mini</o-button>
|
||||
<o-button type="default" size="small">
|
||||
Mini
|
||||
</o-button>
|
||||
<o-button type="warn" size="small">
|
||||
Mini
|
||||
</o-button>
|
||||
</o-equal-space>
|
||||
<br></br>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
onInputNumberChange = (num) => {
|
||||
console.log(num)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<o-equal-space>
|
||||
<o-input-number
|
||||
onChange={this.onInputNumberChange}
|
||||
min={1}
|
||||
max={10}
|
||||
step={1}
|
||||
value={2}
|
||||
label="描述文字"
|
||||
/>
|
||||
</o-equal-space>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,196 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
dataSource = [{
|
||||
id: 1,
|
||||
name: 'xwang',
|
||||
age: 18,
|
||||
address: 'Tencent'
|
||||
}, {
|
||||
id: 2,
|
||||
name: 'dntzhang',
|
||||
age: 12,
|
||||
address: 'Tencent'
|
||||
}, {
|
||||
id: 3,
|
||||
name: 'lucy',
|
||||
age: 12,
|
||||
address: 'Tencent'
|
||||
}, {
|
||||
id: 4,
|
||||
name: 'john',
|
||||
age: 12,
|
||||
address: 'Tencent'
|
||||
}, {
|
||||
id: 5,
|
||||
name: 'tim',
|
||||
age: 12,
|
||||
address: 'Tencent'
|
||||
}];
|
||||
|
||||
columns = [{
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
}, {
|
||||
title: 'Age',
|
||||
key: 'age',
|
||||
}, {
|
||||
title: 'Address',
|
||||
key: 'address',
|
||||
}]
|
||||
|
||||
render() {
|
||||
return (
|
||||
<o-input-table
|
||||
dataSource={this.dataSource}
|
||||
columns={this.columns}>
|
||||
</o-input-table>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')
|
||||
</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
onClick = (e, value) => {
|
||||
console.log(value)
|
||||
}
|
||||
|
||||
render(props, data) {
|
||||
return (
|
||||
<div>
|
||||
<o-input style="width:200px;" placeholder="Enter your name" />
|
||||
<br /><br />
|
||||
<o-input-label label='UserName' />
|
||||
<br />
|
||||
<o-input-button buttonText='提交' onClick={this.onClick} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,341 @@
|
|||
/* BASICS */
|
||||
|
||||
.CodeMirror {
|
||||
/* Set height, width, borders, and global font properties here */
|
||||
font-family: monospace;
|
||||
height: 300px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* PADDING */
|
||||
|
||||
.CodeMirror-lines {
|
||||
padding: 4px 0; /* Vertical padding around content */
|
||||
}
|
||||
.CodeMirror pre {
|
||||
padding: 0 4px; /* Horizontal padding of content */
|
||||
}
|
||||
|
||||
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
|
||||
background-color: white; /* The little square between H and V scrollbars */
|
||||
}
|
||||
|
||||
/* GUTTER */
|
||||
|
||||
.CodeMirror-gutters {
|
||||
border-right: 1px solid #ddd;
|
||||
background-color: #f7f7f7;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.CodeMirror-linenumbers {}
|
||||
.CodeMirror-linenumber {
|
||||
padding: 0 3px 0 5px;
|
||||
min-width: 20px;
|
||||
text-align: right;
|
||||
color: #999;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.CodeMirror-guttermarker { color: black; }
|
||||
.CodeMirror-guttermarker-subtle { color: #999; }
|
||||
|
||||
/* CURSOR */
|
||||
|
||||
.CodeMirror-cursor {
|
||||
border-left: 1px solid black;
|
||||
border-right: none;
|
||||
width: 0;
|
||||
}
|
||||
/* Shown when moving in bi-directional text */
|
||||
.CodeMirror div.CodeMirror-secondarycursor {
|
||||
border-left: 1px solid silver;
|
||||
}
|
||||
.cm-fat-cursor .CodeMirror-cursor {
|
||||
width: auto;
|
||||
border: 0 !important;
|
||||
background: #7e7;
|
||||
}
|
||||
.cm-fat-cursor div.CodeMirror-cursors {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cm-animate-fat-cursor {
|
||||
width: auto;
|
||||
border: 0;
|
||||
-webkit-animation: blink 1.06s steps(1) infinite;
|
||||
-moz-animation: blink 1.06s steps(1) infinite;
|
||||
animation: blink 1.06s steps(1) infinite;
|
||||
background-color: #7e7;
|
||||
}
|
||||
@-moz-keyframes blink {
|
||||
0% {}
|
||||
50% { background-color: transparent; }
|
||||
100% {}
|
||||
}
|
||||
@-webkit-keyframes blink {
|
||||
0% {}
|
||||
50% { background-color: transparent; }
|
||||
100% {}
|
||||
}
|
||||
@keyframes blink {
|
||||
0% {}
|
||||
50% { background-color: transparent; }
|
||||
100% {}
|
||||
}
|
||||
|
||||
/* Can style cursor different in overwrite (non-insert) mode */
|
||||
.CodeMirror-overwrite .CodeMirror-cursor {}
|
||||
|
||||
.cm-tab { display: inline-block; text-decoration: inherit; }
|
||||
|
||||
.CodeMirror-rulers {
|
||||
position: absolute;
|
||||
left: 0; right: 0; top: -50px; bottom: -20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.CodeMirror-ruler {
|
||||
border-left: 1px solid #ccc;
|
||||
top: 0; bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* DEFAULT THEME */
|
||||
|
||||
.cm-s-default .cm-header {color: blue;}
|
||||
.cm-s-default .cm-quote {color: #090;}
|
||||
.cm-negative {color: #d44;}
|
||||
.cm-positive {color: #292;}
|
||||
.cm-header, .cm-strong {font-weight: bold;}
|
||||
.cm-em {font-style: italic;}
|
||||
.cm-link {text-decoration: underline;}
|
||||
.cm-strikethrough {text-decoration: line-through;}
|
||||
|
||||
.cm-s-default .cm-keyword {color: #708;}
|
||||
.cm-s-default .cm-atom {color: #219;}
|
||||
.cm-s-default .cm-number {color: #164;}
|
||||
.cm-s-default .cm-def {color: #00f;}
|
||||
.cm-s-default .cm-variable,
|
||||
.cm-s-default .cm-punctuation,
|
||||
.cm-s-default .cm-property,
|
||||
.cm-s-default .cm-operator {}
|
||||
.cm-s-default .cm-variable-2 {color: #05a;}
|
||||
.cm-s-default .cm-variable-3 {color: #085;}
|
||||
.cm-s-default .cm-comment {color: #a50;}
|
||||
.cm-s-default .cm-string {color: #a11;}
|
||||
.cm-s-default .cm-string-2 {color: #f50;}
|
||||
.cm-s-default .cm-meta {color: #555;}
|
||||
.cm-s-default .cm-qualifier {color: #555;}
|
||||
.cm-s-default .cm-builtin {color: #30a;}
|
||||
.cm-s-default .cm-bracket {color: #997;}
|
||||
.cm-s-default .cm-tag {color: #170;}
|
||||
.cm-s-default .cm-attribute {color: #00c;}
|
||||
.cm-s-default .cm-hr {color: #999;}
|
||||
.cm-s-default .cm-link {color: #00c;}
|
||||
|
||||
.cm-s-default .cm-error {color: #f00;}
|
||||
.cm-invalidchar {color: #f00;}
|
||||
|
||||
.CodeMirror-composing { border-bottom: 2px solid; }
|
||||
|
||||
/* Default styles for common addons */
|
||||
|
||||
div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
|
||||
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
|
||||
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
|
||||
.CodeMirror-activeline-background {background: #e8f2ff;}
|
||||
|
||||
/* STOP */
|
||||
|
||||
/* The rest of this file contains styles related to the mechanics of
|
||||
the editor. You probably shouldn't touch them. */
|
||||
|
||||
.CodeMirror {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.CodeMirror-scroll {
|
||||
overflow: scroll !important; /* Things will break if this is overridden */
|
||||
/* 30px is the magic margin used to hide the element's real scrollbars */
|
||||
/* See overflow: hidden in .CodeMirror */
|
||||
margin-bottom: -30px; margin-right: -30px;
|
||||
padding-bottom: 30px;
|
||||
height: 100%;
|
||||
outline: none; /* Prevent dragging from highlighting the element */
|
||||
position: relative;
|
||||
}
|
||||
.CodeMirror-sizer {
|
||||
position: relative;
|
||||
border-right: 30px solid transparent;
|
||||
}
|
||||
|
||||
/* The fake, visible scrollbars. Used to force redraw during scrolling
|
||||
before actual scrolling happens, thus preventing shaking and
|
||||
flickering artifacts. */
|
||||
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
|
||||
position: absolute;
|
||||
z-index: 6;
|
||||
display: none;
|
||||
}
|
||||
.CodeMirror-vscrollbar {
|
||||
right: 0; top: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.CodeMirror-hscrollbar {
|
||||
bottom: 0; left: 0;
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.CodeMirror-scrollbar-filler {
|
||||
right: 0; bottom: 0;
|
||||
}
|
||||
.CodeMirror-gutter-filler {
|
||||
left: 0; bottom: 0;
|
||||
}
|
||||
|
||||
.CodeMirror-gutters {
|
||||
position: absolute; left: 0; top: 0;
|
||||
min-height: 100%;
|
||||
z-index: 3;
|
||||
}
|
||||
.CodeMirror-gutter {
|
||||
white-space: normal;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-bottom: -30px;
|
||||
}
|
||||
.CodeMirror-gutter-wrapper {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
.CodeMirror-gutter-background {
|
||||
position: absolute;
|
||||
top: 0; bottom: 0;
|
||||
z-index: 4;
|
||||
}
|
||||
.CodeMirror-gutter-elt {
|
||||
position: absolute;
|
||||
cursor: default;
|
||||
z-index: 4;
|
||||
}
|
||||
.CodeMirror-gutter-wrapper {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.CodeMirror-lines {
|
||||
cursor: text;
|
||||
min-height: 1px; /* prevents collapsing before first draw */
|
||||
}
|
||||
.CodeMirror pre {
|
||||
/* Reset some styles that the rest of the page might have set */
|
||||
-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
|
||||
border-width: 0;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
margin: 0;
|
||||
white-space: pre;
|
||||
word-wrap: normal;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-font-variant-ligatures: none;
|
||||
font-variant-ligatures: none;
|
||||
}
|
||||
.CodeMirror-wrap pre {
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.CodeMirror-linebackground {
|
||||
position: absolute;
|
||||
left: 0; right: 0; top: 0; bottom: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.CodeMirror-linewidget {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.CodeMirror-widget {}
|
||||
|
||||
.CodeMirror-code {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Force content-box sizing for the elements where we expect it */
|
||||
.CodeMirror-scroll,
|
||||
.CodeMirror-sizer,
|
||||
.CodeMirror-gutter,
|
||||
.CodeMirror-gutters,
|
||||
.CodeMirror-linenumber {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.CodeMirror-measure {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.CodeMirror-cursor {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
.CodeMirror-measure pre { position: static; }
|
||||
|
||||
div.CodeMirror-cursors {
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
div.CodeMirror-dragcursors {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.CodeMirror-focused div.CodeMirror-cursors {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.CodeMirror-selected { background: #d9d9d9; }
|
||||
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
|
||||
.CodeMirror-crosshair { cursor: crosshair; }
|
||||
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
|
||||
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
|
||||
|
||||
.cm-searching {
|
||||
background: #ffa;
|
||||
background: rgba(255, 255, 0, .4);
|
||||
}
|
||||
|
||||
/* Used to force a border model for a node */
|
||||
.cm-force-border { padding-right: .1px; }
|
||||
|
||||
@media print {
|
||||
/* Hide the cursor when printing */
|
||||
.CodeMirror div.CodeMirror-cursors {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* See issue #2901 */
|
||||
.cm-tab-wrap-hack:after { content: ''; }
|
||||
|
||||
/* Help users use markselection to safely style text background */
|
||||
span.CodeMirror-selectedtext { background: none; }
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,784 @@
|
|||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
function expressionAllowed(stream, state, backUp) {
|
||||
return /^(?:operator|sof|keyword c|case|new|[\[{}\(,;:]|=>)$/.test(state.lastType) ||
|
||||
(state.lastType == "quasi" && /\{\s*$/.test(stream.string.slice(0, stream.pos - (backUp || 0))))
|
||||
}
|
||||
|
||||
CodeMirror.defineMode("javascript", function(config, parserConfig) {
|
||||
var indentUnit = config.indentUnit;
|
||||
var statementIndent = parserConfig.statementIndent;
|
||||
var jsonldMode = parserConfig.jsonld;
|
||||
var jsonMode = parserConfig.json || jsonldMode;
|
||||
var isTS = parserConfig.typescript;
|
||||
var wordRE = parserConfig.wordCharacters || /[\w$\xa1-\uffff]/;
|
||||
|
||||
// Tokenizer
|
||||
|
||||
var keywords = function(){
|
||||
function kw(type) {return {type: type, style: "keyword"};}
|
||||
var A = kw("keyword a"), B = kw("keyword b"), C = kw("keyword c");
|
||||
var operator = kw("operator"), atom = {type: "atom", style: "atom"};
|
||||
|
||||
var jsKeywords = {
|
||||
"if": kw("if"), "while": A, "with": A, "else": B, "do": B, "try": B, "finally": B,
|
||||
"return": C, "break": C, "continue": C, "new": kw("new"), "delete": C, "throw": C, "debugger": C,
|
||||
"var": kw("var"), "const": kw("var"), "let": kw("var"),
|
||||
"function": kw("function"), "catch": kw("catch"),
|
||||
"for": kw("for"), "switch": kw("switch"), "case": kw("case"), "default": kw("default"),
|
||||
"in": operator, "typeof": operator, "instanceof": operator,
|
||||
"true": atom, "false": atom, "null": atom, "undefined": atom, "NaN": atom, "Infinity": atom,
|
||||
"this": kw("this"), "class": kw("class"), "super": kw("atom"),
|
||||
"yield": C, "export": kw("export"), "import": kw("import"), "extends": C,
|
||||
"await": C, "async": kw("async")
|
||||
};
|
||||
|
||||
// Extend the 'normal' keywords with the TypeScript language extensions
|
||||
if (isTS) {
|
||||
var type = {type: "variable", style: "variable-3"};
|
||||
var tsKeywords = {
|
||||
// object-like things
|
||||
"interface": kw("class"),
|
||||
"implements": C,
|
||||
"namespace": C,
|
||||
"module": kw("module"),
|
||||
"enum": kw("module"),
|
||||
"type": kw("type"),
|
||||
|
||||
// scope modifiers
|
||||
"public": kw("modifier"),
|
||||
"private": kw("modifier"),
|
||||
"protected": kw("modifier"),
|
||||
"abstract": kw("modifier"),
|
||||
|
||||
// operators
|
||||
"as": operator,
|
||||
|
||||
// types
|
||||
"string": type, "number": type, "boolean": type, "any": type
|
||||
};
|
||||
|
||||
for (var attr in tsKeywords) {
|
||||
jsKeywords[attr] = tsKeywords[attr];
|
||||
}
|
||||
}
|
||||
|
||||
return jsKeywords;
|
||||
}();
|
||||
|
||||
var isOperatorChar = /[+\-*&%=<>!?|~^]/;
|
||||
var isJsonldKeyword = /^@(context|id|value|language|type|container|list|set|reverse|index|base|vocab|graph)"/;
|
||||
|
||||
function readRegexp(stream) {
|
||||
var escaped = false, next, inSet = false;
|
||||
while ((next = stream.next()) != null) {
|
||||
if (!escaped) {
|
||||
if (next == "/" && !inSet) return;
|
||||
if (next == "[") inSet = true;
|
||||
else if (inSet && next == "]") inSet = false;
|
||||
}
|
||||
escaped = !escaped && next == "\\";
|
||||
}
|
||||
}
|
||||
|
||||
// Used as scratch variables to communicate multiple values without
|
||||
// consing up tons of objects.
|
||||
var type, content;
|
||||
function ret(tp, style, cont) {
|
||||
type = tp; content = cont;
|
||||
return style;
|
||||
}
|
||||
function tokenBase(stream, state) {
|
||||
var ch = stream.next();
|
||||
if (ch == '"' || ch == "'") {
|
||||
state.tokenize = tokenString(ch);
|
||||
return state.tokenize(stream, state);
|
||||
} else if (ch == "." && stream.match(/^\d+(?:[eE][+\-]?\d+)?/)) {
|
||||
return ret("number", "number");
|
||||
} else if (ch == "." && stream.match("..")) {
|
||||
return ret("spread", "meta");
|
||||
} else if (/[\[\]{}\(\),;\:\.]/.test(ch)) {
|
||||
return ret(ch);
|
||||
} else if (ch == "=" && stream.eat(">")) {
|
||||
return ret("=>", "operator");
|
||||
} else if (ch == "0" && stream.eat(/x/i)) {
|
||||
stream.eatWhile(/[\da-f]/i);
|
||||
return ret("number", "number");
|
||||
} else if (ch == "0" && stream.eat(/o/i)) {
|
||||
stream.eatWhile(/[0-7]/i);
|
||||
return ret("number", "number");
|
||||
} else if (ch == "0" && stream.eat(/b/i)) {
|
||||
stream.eatWhile(/[01]/i);
|
||||
return ret("number", "number");
|
||||
} else if (/\d/.test(ch)) {
|
||||
stream.match(/^\d*(?:\.\d*)?(?:[eE][+\-]?\d+)?/);
|
||||
return ret("number", "number");
|
||||
} else if (ch == "/") {
|
||||
if (stream.eat("*")) {
|
||||
state.tokenize = tokenComment;
|
||||
return tokenComment(stream, state);
|
||||
} else if (stream.eat("/")) {
|
||||
stream.skipToEnd();
|
||||
return ret("comment", "comment");
|
||||
} else if (expressionAllowed(stream, state, 1)) {
|
||||
readRegexp(stream);
|
||||
stream.match(/^\b(([gimyu])(?![gimyu]*\2))+\b/);
|
||||
return ret("regexp", "string-2");
|
||||
} else {
|
||||
stream.eatWhile(isOperatorChar);
|
||||
return ret("operator", "operator", stream.current());
|
||||
}
|
||||
} else if (ch == "`") {
|
||||
state.tokenize = tokenQuasi;
|
||||
return tokenQuasi(stream, state);
|
||||
} else if (ch == "#") {
|
||||
stream.skipToEnd();
|
||||
return ret("error", "error");
|
||||
} else if (isOperatorChar.test(ch)) {
|
||||
stream.eatWhile(isOperatorChar);
|
||||
return ret("operator", "operator", stream.current());
|
||||
} else if (wordRE.test(ch)) {
|
||||
stream.eatWhile(wordRE);
|
||||
var word = stream.current(), known = keywords.propertyIsEnumerable(word) && keywords[word];
|
||||
return (known && state.lastType != ".") ? ret(known.type, known.style, word) :
|
||||
ret("variable", "variable", word);
|
||||
}
|
||||
}
|
||||
|
||||
function tokenString(quote) {
|
||||
return function(stream, state) {
|
||||
var escaped = false, next;
|
||||
if (jsonldMode && stream.peek() == "@" && stream.match(isJsonldKeyword)){
|
||||
state.tokenize = tokenBase;
|
||||
return ret("jsonld-keyword", "meta");
|
||||
}
|
||||
while ((next = stream.next()) != null) {
|
||||
if (next == quote && !escaped) break;
|
||||
escaped = !escaped && next == "\\";
|
||||
}
|
||||
if (!escaped) state.tokenize = tokenBase;
|
||||
return ret("string", "string");
|
||||
};
|
||||
}
|
||||
|
||||
function tokenComment(stream, state) {
|
||||
var maybeEnd = false, ch;
|
||||
while (ch = stream.next()) {
|
||||
if (ch == "/" && maybeEnd) {
|
||||
state.tokenize = tokenBase;
|
||||
break;
|
||||
}
|
||||
maybeEnd = (ch == "*");
|
||||
}
|
||||
return ret("comment", "comment");
|
||||
}
|
||||
|
||||
function tokenQuasi(stream, state) {
|
||||
var escaped = false, next;
|
||||
while ((next = stream.next()) != null) {
|
||||
if (!escaped && (next == "`" || next == "$" && stream.eat("{"))) {
|
||||
state.tokenize = tokenBase;
|
||||
break;
|
||||
}
|
||||
escaped = !escaped && next == "\\";
|
||||
}
|
||||
return ret("quasi", "string-2", stream.current());
|
||||
}
|
||||
|
||||
var brackets = "([{}])";
|
||||
// This is a crude lookahead trick to try and notice that we're
|
||||
// parsing the argument patterns for a fat-arrow function before we
|
||||
// actually hit the arrow token. It only works if the arrow is on
|
||||
// the same line as the arguments and there's no strange noise
|
||||
// (comments) in between. Fallback is to only notice when we hit the
|
||||
// arrow, and not declare the arguments as locals for the arrow
|
||||
// body.
|
||||
function findFatArrow(stream, state) {
|
||||
if (state.fatArrowAt) state.fatArrowAt = null;
|
||||
var arrow = stream.string.indexOf("=>", stream.start);
|
||||
if (arrow < 0) return;
|
||||
|
||||
if (isTS) { // Try to skip TypeScript return type declarations after the arguments
|
||||
var m = /:\s*(?:\w+(?:<[^>]*>|\[\])?|\{[^}]*\})\s*$/.exec(stream.string.slice(stream.start, arrow))
|
||||
if (m) arrow = m.index
|
||||
}
|
||||
|
||||
var depth = 0, sawSomething = false;
|
||||
for (var pos = arrow - 1; pos >= 0; --pos) {
|
||||
var ch = stream.string.charAt(pos);
|
||||
var bracket = brackets.indexOf(ch);
|
||||
if (bracket >= 0 && bracket < 3) {
|
||||
if (!depth) { ++pos; break; }
|
||||
if (--depth == 0) { if (ch == "(") sawSomething = true; break; }
|
||||
} else if (bracket >= 3 && bracket < 6) {
|
||||
++depth;
|
||||
} else if (wordRE.test(ch)) {
|
||||
sawSomething = true;
|
||||
} else if (/["'\/]/.test(ch)) {
|
||||
return;
|
||||
} else if (sawSomething && !depth) {
|
||||
++pos;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (sawSomething && !depth) state.fatArrowAt = pos;
|
||||
}
|
||||
|
||||
// Parser
|
||||
|
||||
var atomicTypes = {"atom": true, "number": true, "variable": true, "string": true, "regexp": true, "this": true, "jsonld-keyword": true};
|
||||
|
||||
function JSLexical(indented, column, type, align, prev, info) {
|
||||
this.indented = indented;
|
||||
this.column = column;
|
||||
this.type = type;
|
||||
this.prev = prev;
|
||||
this.info = info;
|
||||
if (align != null) this.align = align;
|
||||
}
|
||||
|
||||
function inScope(state, varname) {
|
||||
for (var v = state.localVars; v; v = v.next)
|
||||
if (v.name == varname) return true;
|
||||
for (var cx = state.context; cx; cx = cx.prev) {
|
||||
for (var v = cx.vars; v; v = v.next)
|
||||
if (v.name == varname) return true;
|
||||
}
|
||||
}
|
||||
|
||||
function parseJS(state, style, type, content, stream) {
|
||||
var cc = state.cc;
|
||||
// Communicate our context to the combinators.
|
||||
// (Less wasteful than consing up a hundred closures on every call.)
|
||||
cx.state = state; cx.stream = stream; cx.marked = null, cx.cc = cc; cx.style = style;
|
||||
|
||||
if (!state.lexical.hasOwnProperty("align"))
|
||||
state.lexical.align = true;
|
||||
|
||||
while(true) {
|
||||
var combinator = cc.length ? cc.pop() : jsonMode ? expression : statement;
|
||||
if (combinator(type, content)) {
|
||||
while(cc.length && cc[cc.length - 1].lex)
|
||||
cc.pop()();
|
||||
if (cx.marked) return cx.marked;
|
||||
if (type == "variable" && inScope(state, content)) return "variable-2";
|
||||
return style;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Combinator utils
|
||||
|
||||
var cx = {state: null, column: null, marked: null, cc: null};
|
||||
function pass() {
|
||||
for (var i = arguments.length - 1; i >= 0; i--) cx.cc.push(arguments[i]);
|
||||
}
|
||||
function cont() {
|
||||
pass.apply(null, arguments);
|
||||
return true;
|
||||
}
|
||||
function register(varname) {
|
||||
function inList(list) {
|
||||
for (var v = list; v; v = v.next)
|
||||
if (v.name == varname) return true;
|
||||
return false;
|
||||
}
|
||||
var state = cx.state;
|
||||
cx.marked = "def";
|
||||
if (state.context) {
|
||||
if (inList(state.localVars)) return;
|
||||
state.localVars = {name: varname, next: state.localVars};
|
||||
} else {
|
||||
if (inList(state.globalVars)) return;
|
||||
if (parserConfig.globalVars)
|
||||
state.globalVars = {name: varname, next: state.globalVars};
|
||||
}
|
||||
}
|
||||
|
||||
// Combinators
|
||||
|
||||
var defaultVars = {name: "this", next: {name: "arguments"}};
|
||||
function pushcontext() {
|
||||
cx.state.context = {prev: cx.state.context, vars: cx.state.localVars};
|
||||
cx.state.localVars = defaultVars;
|
||||
}
|
||||
function popcontext() {
|
||||
cx.state.localVars = cx.state.context.vars;
|
||||
cx.state.context = cx.state.context.prev;
|
||||
}
|
||||
function pushlex(type, info) {
|
||||
var result = function() {
|
||||
var state = cx.state, indent = state.indented;
|
||||
if (state.lexical.type == "stat") indent = state.lexical.indented;
|
||||
else for (var outer = state.lexical; outer && outer.type == ")" && outer.align; outer = outer.prev)
|
||||
indent = outer.indented;
|
||||
state.lexical = new JSLexical(indent, cx.stream.column(), type, null, state.lexical, info);
|
||||
};
|
||||
result.lex = true;
|
||||
return result;
|
||||
}
|
||||
function poplex() {
|
||||
var state = cx.state;
|
||||
if (state.lexical.prev) {
|
||||
if (state.lexical.type == ")")
|
||||
state.indented = state.lexical.indented;
|
||||
state.lexical = state.lexical.prev;
|
||||
}
|
||||
}
|
||||
poplex.lex = true;
|
||||
|
||||
function expect(wanted) {
|
||||
function exp(type) {
|
||||
if (type == wanted) return cont();
|
||||
else if (wanted == ";") return pass();
|
||||
else return cont(exp);
|
||||
};
|
||||
return exp;
|
||||
}
|
||||
|
||||
function statement(type, value) {
|
||||
if (type == "var") return cont(pushlex("vardef", value.length), vardef, expect(";"), poplex);
|
||||
if (type == "keyword a") return cont(pushlex("form"), parenExpr, statement, poplex);
|
||||
if (type == "keyword b") return cont(pushlex("form"), statement, poplex);
|
||||
if (type == "{") return cont(pushlex("}"), block, poplex);
|
||||
if (type == ";") return cont();
|
||||
if (type == "if") {
|
||||
if (cx.state.lexical.info == "else" && cx.state.cc[cx.state.cc.length - 1] == poplex)
|
||||
cx.state.cc.pop()();
|
||||
return cont(pushlex("form"), parenExpr, statement, poplex, maybeelse);
|
||||
}
|
||||
if (type == "function") return cont(functiondef);
|
||||
if (type == "for") return cont(pushlex("form"), forspec, statement, poplex);
|
||||
if (type == "variable") return cont(pushlex("stat"), maybelabel);
|
||||
if (type == "switch") return cont(pushlex("form"), parenExpr, pushlex("}", "switch"), expect("{"),
|
||||
block, poplex, poplex);
|
||||
if (type == "case") return cont(expression, expect(":"));
|
||||
if (type == "default") return cont(expect(":"));
|
||||
if (type == "catch") return cont(pushlex("form"), pushcontext, expect("("), funarg, expect(")"),
|
||||
statement, poplex, popcontext);
|
||||
if (type == "class") return cont(pushlex("form"), className, poplex);
|
||||
if (type == "export") return cont(pushlex("stat"), afterExport, poplex);
|
||||
if (type == "import") return cont(pushlex("stat"), afterImport, poplex);
|
||||
if (type == "module") return cont(pushlex("form"), pattern, pushlex("}"), expect("{"), block, poplex, poplex)
|
||||
if (type == "type") return cont(typeexpr, expect("operator"), typeexpr, expect(";"));
|
||||
if (type == "async") return cont(statement)
|
||||
return pass(pushlex("stat"), expression, expect(";"), poplex);
|
||||
}
|
||||
function expression(type) {
|
||||
return expressionInner(type, false);
|
||||
}
|
||||
function expressionNoComma(type) {
|
||||
return expressionInner(type, true);
|
||||
}
|
||||
function parenExpr(type) {
|
||||
if (type != "(") return pass()
|
||||
return cont(pushlex(")"), expression, expect(")"), poplex)
|
||||
}
|
||||
function expressionInner(type, noComma) {
|
||||
if (cx.state.fatArrowAt == cx.stream.start) {
|
||||
var body = noComma ? arrowBodyNoComma : arrowBody;
|
||||
if (type == "(") return cont(pushcontext, pushlex(")"), commasep(pattern, ")"), poplex, expect("=>"), body, popcontext);
|
||||
else if (type == "variable") return pass(pushcontext, pattern, expect("=>"), body, popcontext);
|
||||
}
|
||||
|
||||
var maybeop = noComma ? maybeoperatorNoComma : maybeoperatorComma;
|
||||
if (atomicTypes.hasOwnProperty(type)) return cont(maybeop);
|
||||
if (type == "function") return cont(functiondef, maybeop);
|
||||
if (type == "class") return cont(pushlex("form"), classExpression, poplex);
|
||||
if (type == "keyword c" || type == "async") return cont(noComma ? maybeexpressionNoComma : maybeexpression);
|
||||
if (type == "(") return cont(pushlex(")"), maybeexpression, expect(")"), poplex, maybeop);
|
||||
if (type == "operator" || type == "spread") return cont(noComma ? expressionNoComma : expression);
|
||||
if (type == "[") return cont(pushlex("]"), arrayLiteral, poplex, maybeop);
|
||||
if (type == "{") return contCommasep(objprop, "}", null, maybeop);
|
||||
if (type == "quasi") return pass(quasi, maybeop);
|
||||
if (type == "new") return cont(maybeTarget(noComma));
|
||||
return cont();
|
||||
}
|
||||
function maybeexpression(type) {
|
||||
if (type.match(/[;\}\)\],]/)) return pass();
|
||||
return pass(expression);
|
||||
}
|
||||
function maybeexpressionNoComma(type) {
|
||||
if (type.match(/[;\}\)\],]/)) return pass();
|
||||
return pass(expressionNoComma);
|
||||
}
|
||||
|
||||
function maybeoperatorComma(type, value) {
|
||||
if (type == ",") return cont(expression);
|
||||
return maybeoperatorNoComma(type, value, false);
|
||||
}
|
||||
function maybeoperatorNoComma(type, value, noComma) {
|
||||
var me = noComma == false ? maybeoperatorComma : maybeoperatorNoComma;
|
||||
var expr = noComma == false ? expression : expressionNoComma;
|
||||
if (type == "=>") return cont(pushcontext, noComma ? arrowBodyNoComma : arrowBody, popcontext);
|
||||
if (type == "operator") {
|
||||
if (/\+\+|--/.test(value)) return cont(me);
|
||||
if (value == "?") return cont(expression, expect(":"), expr);
|
||||
return cont(expr);
|
||||
}
|
||||
if (type == "quasi") { return pass(quasi, me); }
|
||||
if (type == ";") return;
|
||||
if (type == "(") return contCommasep(expressionNoComma, ")", "call", me);
|
||||
if (type == ".") return cont(property, me);
|
||||
if (type == "[") return cont(pushlex("]"), maybeexpression, expect("]"), poplex, me);
|
||||
}
|
||||
function quasi(type, value) {
|
||||
if (type != "quasi") return pass();
|
||||
if (value.slice(value.length - 2) != "${") return cont(quasi);
|
||||
return cont(expression, continueQuasi);
|
||||
}
|
||||
function continueQuasi(type) {
|
||||
if (type == "}") {
|
||||
cx.marked = "string-2";
|
||||
cx.state.tokenize = tokenQuasi;
|
||||
return cont(quasi);
|
||||
}
|
||||
}
|
||||
function arrowBody(type) {
|
||||
findFatArrow(cx.stream, cx.state);
|
||||
return pass(type == "{" ? statement : expression);
|
||||
}
|
||||
function arrowBodyNoComma(type) {
|
||||
findFatArrow(cx.stream, cx.state);
|
||||
return pass(type == "{" ? statement : expressionNoComma);
|
||||
}
|
||||
function maybeTarget(noComma) {
|
||||
return function(type) {
|
||||
if (type == ".") return cont(noComma ? targetNoComma : target);
|
||||
else return pass(noComma ? expressionNoComma : expression);
|
||||
};
|
||||
}
|
||||
function target(_, value) {
|
||||
if (value == "target") { cx.marked = "keyword"; return cont(maybeoperatorComma); }
|
||||
}
|
||||
function targetNoComma(_, value) {
|
||||
if (value == "target") { cx.marked = "keyword"; return cont(maybeoperatorNoComma); }
|
||||
}
|
||||
function maybelabel(type) {
|
||||
if (type == ":") return cont(poplex, statement);
|
||||
return pass(maybeoperatorComma, expect(";"), poplex);
|
||||
}
|
||||
function property(type) {
|
||||
if (type == "variable") {cx.marked = "property"; return cont();}
|
||||
}
|
||||
function objprop(type, value) {
|
||||
if (type == "async") {
|
||||
cx.marked = "property";
|
||||
return cont(objprop);
|
||||
} else if (type == "variable" || cx.style == "keyword") {
|
||||
cx.marked = "property";
|
||||
if (value == "get" || value == "set") return cont(getterSetter);
|
||||
return cont(afterprop);
|
||||
} else if (type == "number" || type == "string") {
|
||||
cx.marked = jsonldMode ? "property" : (cx.style + " property");
|
||||
return cont(afterprop);
|
||||
} else if (type == "jsonld-keyword") {
|
||||
return cont(afterprop);
|
||||
} else if (type == "modifier") {
|
||||
return cont(objprop)
|
||||
} else if (type == "[") {
|
||||
return cont(expression, expect("]"), afterprop);
|
||||
} else if (type == "spread") {
|
||||
return cont(expression);
|
||||
} else if (type == ":") {
|
||||
return pass(afterprop)
|
||||
}
|
||||
}
|
||||
function getterSetter(type) {
|
||||
if (type != "variable") return pass(afterprop);
|
||||
cx.marked = "property";
|
||||
return cont(functiondef);
|
||||
}
|
||||
function afterprop(type) {
|
||||
if (type == ":") return cont(expressionNoComma);
|
||||
if (type == "(") return pass(functiondef);
|
||||
}
|
||||
function commasep(what, end) {
|
||||
function proceed(type, value) {
|
||||
if (type == ",") {
|
||||
var lex = cx.state.lexical;
|
||||
if (lex.info == "call") lex.pos = (lex.pos || 0) + 1;
|
||||
return cont(function(type, value) {
|
||||
if (type == end || value == end) return pass()
|
||||
return pass(what)
|
||||
}, proceed);
|
||||
}
|
||||
if (type == end || value == end) return cont();
|
||||
return cont(expect(end));
|
||||
}
|
||||
return function(type, value) {
|
||||
if (type == end || value == end) return cont();
|
||||
return pass(what, proceed);
|
||||
};
|
||||
}
|
||||
function contCommasep(what, end, info) {
|
||||
for (var i = 3; i < arguments.length; i++)
|
||||
cx.cc.push(arguments[i]);
|
||||
return cont(pushlex(end, info), commasep(what, end), poplex);
|
||||
}
|
||||
function block(type) {
|
||||
if (type == "}") return cont();
|
||||
return pass(statement, block);
|
||||
}
|
||||
function maybetype(type, value) {
|
||||
if (isTS) {
|
||||
if (type == ":") return cont(typeexpr);
|
||||
if (value == "?") return cont(maybetype);
|
||||
}
|
||||
}
|
||||
function typeexpr(type) {
|
||||
if (type == "variable") {cx.marked = "variable-3"; return cont(afterType);}
|
||||
if (type == "{") return cont(commasep(typeprop, "}"))
|
||||
if (type == "(") return cont(commasep(typearg, ")"), maybeReturnType)
|
||||
}
|
||||
function maybeReturnType(type) {
|
||||
if (type == "=>") return cont(typeexpr)
|
||||
}
|
||||
function typeprop(type) {
|
||||
if (type == "variable" || cx.style == "keyword") {
|
||||
cx.marked = "property"
|
||||
return cont(typeprop)
|
||||
} else if (type == ":") {
|
||||
return cont(typeexpr)
|
||||
}
|
||||
}
|
||||
function typearg(type) {
|
||||
if (type == "variable") return cont(typearg)
|
||||
else if (type == ":") return cont(typeexpr)
|
||||
}
|
||||
function afterType(type, value) {
|
||||
if (value == "<") return cont(commasep(typeexpr, ">"), afterType)
|
||||
if (type == "[") return cont(expect("]"), afterType)
|
||||
}
|
||||
function vardef() {
|
||||
return pass(pattern, maybetype, maybeAssign, vardefCont);
|
||||
}
|
||||
function pattern(type, value) {
|
||||
if (type == "modifier") return cont(pattern)
|
||||
if (type == "variable") { register(value); return cont(); }
|
||||
if (type == "spread") return cont(pattern);
|
||||
if (type == "[") return contCommasep(pattern, "]");
|
||||
if (type == "{") return contCommasep(proppattern, "}");
|
||||
}
|
||||
function proppattern(type, value) {
|
||||
if (type == "variable" && !cx.stream.match(/^\s*:/, false)) {
|
||||
register(value);
|
||||
return cont(maybeAssign);
|
||||
}
|
||||
if (type == "variable") cx.marked = "property";
|
||||
if (type == "spread") return cont(pattern);
|
||||
if (type == "}") return pass();
|
||||
return cont(expect(":"), pattern, maybeAssign);
|
||||
}
|
||||
function maybeAssign(_type, value) {
|
||||
if (value == "=") return cont(expressionNoComma);
|
||||
}
|
||||
function vardefCont(type) {
|
||||
if (type == ",") return cont(vardef);
|
||||
}
|
||||
function maybeelse(type, value) {
|
||||
if (type == "keyword b" && value == "else") return cont(pushlex("form", "else"), statement, poplex);
|
||||
}
|
||||
function forspec(type) {
|
||||
if (type == "(") return cont(pushlex(")"), forspec1, expect(")"), poplex);
|
||||
}
|
||||
function forspec1(type) {
|
||||
if (type == "var") return cont(vardef, expect(";"), forspec2);
|
||||
if (type == ";") return cont(forspec2);
|
||||
if (type == "variable") return cont(formaybeinof);
|
||||
return pass(expression, expect(";"), forspec2);
|
||||
}
|
||||
function formaybeinof(_type, value) {
|
||||
if (value == "in" || value == "of") { cx.marked = "keyword"; return cont(expression); }
|
||||
return cont(maybeoperatorComma, forspec2);
|
||||
}
|
||||
function forspec2(type, value) {
|
||||
if (type == ";") return cont(forspec3);
|
||||
if (value == "in" || value == "of") { cx.marked = "keyword"; return cont(expression); }
|
||||
return pass(expression, expect(";"), forspec3);
|
||||
}
|
||||
function forspec3(type) {
|
||||
if (type != ")") cont(expression);
|
||||
}
|
||||
function functiondef(type, value) {
|
||||
if (value == "*") {cx.marked = "keyword"; return cont(functiondef);}
|
||||
if (type == "variable") {register(value); return cont(functiondef);}
|
||||
if (type == "(") return cont(pushcontext, pushlex(")"), commasep(funarg, ")"), poplex, maybetype, statement, popcontext);
|
||||
}
|
||||
function funarg(type) {
|
||||
if (type == "spread") return cont(funarg);
|
||||
return pass(pattern, maybetype, maybeAssign);
|
||||
}
|
||||
function classExpression(type, value) {
|
||||
// Class expressions may have an optional name.
|
||||
if (type == "variable") return className(type, value);
|
||||
return classNameAfter(type, value);
|
||||
}
|
||||
function className(type, value) {
|
||||
if (type == "variable") {register(value); return cont(classNameAfter);}
|
||||
}
|
||||
function classNameAfter(type, value) {
|
||||
if (value == "extends" || value == "implements") return cont(isTS ? typeexpr : expression, classNameAfter);
|
||||
if (type == "{") return cont(pushlex("}"), classBody, poplex);
|
||||
}
|
||||
function classBody(type, value) {
|
||||
if (type == "variable" || cx.style == "keyword") {
|
||||
if ((value == "static" || value == "get" || value == "set" ||
|
||||
(isTS && (value == "public" || value == "private" || value == "protected" || value == "readonly" || value == "abstract"))) &&
|
||||
cx.stream.match(/^\s+[\w$\xa1-\uffff]/, false)) {
|
||||
cx.marked = "keyword";
|
||||
return cont(classBody);
|
||||
}
|
||||
cx.marked = "property";
|
||||
return cont(isTS ? classfield : functiondef, classBody);
|
||||
}
|
||||
if (value == "*") {
|
||||
cx.marked = "keyword";
|
||||
return cont(classBody);
|
||||
}
|
||||
if (type == ";") return cont(classBody);
|
||||
if (type == "}") return cont();
|
||||
}
|
||||
function classfield(type, value) {
|
||||
if (value == "?") return cont(classfield)
|
||||
if (type == ":") return cont(typeexpr, maybeAssign)
|
||||
return pass(functiondef)
|
||||
}
|
||||
function afterExport(_type, value) {
|
||||
if (value == "*") { cx.marked = "keyword"; return cont(maybeFrom, expect(";")); }
|
||||
if (value == "default") { cx.marked = "keyword"; return cont(expression, expect(";")); }
|
||||
return pass(statement);
|
||||
}
|
||||
function afterImport(type) {
|
||||
if (type == "string") return cont();
|
||||
return pass(importSpec, maybeFrom);
|
||||
}
|
||||
function importSpec(type, value) {
|
||||
if (type == "{") return contCommasep(importSpec, "}");
|
||||
if (type == "variable") register(value);
|
||||
if (value == "*") cx.marked = "keyword";
|
||||
return cont(maybeAs);
|
||||
}
|
||||
function maybeAs(_type, value) {
|
||||
if (value == "as") { cx.marked = "keyword"; return cont(importSpec); }
|
||||
}
|
||||
function maybeFrom(_type, value) {
|
||||
if (value == "from") { cx.marked = "keyword"; return cont(expression); }
|
||||
}
|
||||
function arrayLiteral(type) {
|
||||
if (type == "]") return cont();
|
||||
return pass(commasep(expressionNoComma, "]"));
|
||||
}
|
||||
|
||||
function isContinuedStatement(state, textAfter) {
|
||||
return state.lastType == "operator" || state.lastType == "," ||
|
||||
isOperatorChar.test(textAfter.charAt(0)) ||
|
||||
/[,.]/.test(textAfter.charAt(0));
|
||||
}
|
||||
|
||||
// Interface
|
||||
|
||||
return {
|
||||
startState: function(basecolumn) {
|
||||
var state = {
|
||||
tokenize: tokenBase,
|
||||
lastType: "sof",
|
||||
cc: [],
|
||||
lexical: new JSLexical((basecolumn || 0) - indentUnit, 0, "block", false),
|
||||
localVars: parserConfig.localVars,
|
||||
context: parserConfig.localVars && {vars: parserConfig.localVars},
|
||||
indented: basecolumn || 0
|
||||
};
|
||||
if (parserConfig.globalVars && typeof parserConfig.globalVars == "object")
|
||||
state.globalVars = parserConfig.globalVars;
|
||||
return state;
|
||||
},
|
||||
|
||||
token: function(stream, state) {
|
||||
if (stream.sol()) {
|
||||
if (!state.lexical.hasOwnProperty("align"))
|
||||
state.lexical.align = false;
|
||||
state.indented = stream.indentation();
|
||||
findFatArrow(stream, state);
|
||||
}
|
||||
if (state.tokenize != tokenComment && stream.eatSpace()) return null;
|
||||
var style = state.tokenize(stream, state);
|
||||
if (type == "comment") return style;
|
||||
state.lastType = type == "operator" && (content == "++" || content == "--") ? "incdec" : type;
|
||||
return parseJS(state, style, type, content, stream);
|
||||
},
|
||||
|
||||
indent: function(state, textAfter) {
|
||||
if (state.tokenize == tokenComment) return CodeMirror.Pass;
|
||||
if (state.tokenize != tokenBase) return 0;
|
||||
var firstChar = textAfter && textAfter.charAt(0), lexical = state.lexical, top
|
||||
// Kludge to prevent 'maybelse' from blocking lexical scope pops
|
||||
if (!/^\s*else\b/.test(textAfter)) for (var i = state.cc.length - 1; i >= 0; --i) {
|
||||
var c = state.cc[i];
|
||||
if (c == poplex) lexical = lexical.prev;
|
||||
else if (c != maybeelse) break;
|
||||
}
|
||||
while ((lexical.type == "stat" || lexical.type == "form") &&
|
||||
(firstChar == "}" || ((top = state.cc[state.cc.length - 1]) &&
|
||||
(top == maybeoperatorComma || top == maybeoperatorNoComma) &&
|
||||
!/^[,\.=+\-*:?[\(]/.test(textAfter))))
|
||||
lexical = lexical.prev;
|
||||
if (statementIndent && lexical.type == ")" && lexical.prev.type == "stat")
|
||||
lexical = lexical.prev;
|
||||
var type = lexical.type, closing = firstChar == type;
|
||||
|
||||
if (type == "vardef") return lexical.indented + (state.lastType == "operator" || state.lastType == "," ? lexical.info + 1 : 0);
|
||||
else if (type == "form" && firstChar == "{") return lexical.indented;
|
||||
else if (type == "form") return lexical.indented + indentUnit;
|
||||
else if (type == "stat")
|
||||
return lexical.indented + (isContinuedStatement(state, textAfter) ? statementIndent || indentUnit : 0);
|
||||
else if (lexical.info == "switch" && !closing && parserConfig.doubleIndentSwitch != false)
|
||||
return lexical.indented + (/^(?:case|default)\b/.test(textAfter) ? indentUnit : 2 * indentUnit);
|
||||
else if (lexical.align) return lexical.column + (closing ? 0 : 1);
|
||||
else return lexical.indented + (closing ? 0 : indentUnit);
|
||||
},
|
||||
|
||||
electricInput: /^\s*(?:case .*?:|default:|\{|\})$/,
|
||||
blockCommentStart: jsonMode ? null : "/*",
|
||||
blockCommentEnd: jsonMode ? null : "*/",
|
||||
lineComment: jsonMode ? null : "//",
|
||||
fold: "brace",
|
||||
closeBrackets: "()[]{}''\"\"``",
|
||||
|
||||
helperType: jsonMode ? "json" : "javascript",
|
||||
jsonldMode: jsonldMode,
|
||||
jsonMode: jsonMode,
|
||||
|
||||
expressionAllowed: expressionAllowed,
|
||||
skipExpression: function(state) {
|
||||
var top = state.cc[state.cc.length - 1]
|
||||
if (top == expression || top == expressionNoComma) state.cc.pop()
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
CodeMirror.registerHelper("wordChars", "javascript", /[\w$]/);
|
||||
|
||||
CodeMirror.defineMIME("text/javascript", "javascript");
|
||||
CodeMirror.defineMIME("text/ecmascript", "javascript");
|
||||
CodeMirror.defineMIME("application/javascript", "javascript");
|
||||
CodeMirror.defineMIME("application/x-javascript", "javascript");
|
||||
CodeMirror.defineMIME("application/ecmascript", "javascript");
|
||||
CodeMirror.defineMIME("application/json", {name: "javascript", json: true});
|
||||
CodeMirror.defineMIME("application/x-json", {name: "javascript", json: true});
|
||||
CodeMirror.defineMIME("application/ld+json", {name: "javascript", jsonld: true});
|
||||
CodeMirror.defineMIME("text/typescript", { name: "javascript", typescript: true });
|
||||
CodeMirror.defineMIME("application/typescript", { name: "javascript", typescript: true });
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,461 @@
|
|||
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/**
|
||||
* 1. Change the default font family in all browsers (opinionated).
|
||||
* 2. Correct the line height in all browsers.
|
||||
* 3. Prevent adjustments of font size after orientation changes in
|
||||
* IE on Windows Phone and in iOS.
|
||||
*/
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
line-height: 1.15; /* 2 */
|
||||
-ms-text-size-adjust: 100%; /* 3 */
|
||||
-webkit-text-size-adjust: 100%; /* 3 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
footer,
|
||||
header,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in IE.
|
||||
*/
|
||||
|
||||
figcaption,
|
||||
figure,
|
||||
main { /* 1 */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct margin in IE 8.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Remove the gray background on active links in IE 10.
|
||||
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent; /* 1 */
|
||||
-webkit-text-decoration-skip: objects; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the outline on focused links when they are also active or hovered
|
||||
* in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Firefox 39-.
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font style in Android 4.3-.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct background and color in IE 9-.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background-color: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
audio,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in iOS 4-7.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10-.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the overflow in IE.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers (opinionated).
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
* controls in Android 4.
|
||||
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
html [type="button"], /* 1 */
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Change the border, margin, and padding in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct display in IE 9-.
|
||||
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10-.
|
||||
* 2. Remove the padding in IE 10-.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in Edge, IE, and Firefox.
|
||||
*/
|
||||
|
||||
details, /* 1 */
|
||||
menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Scripting
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hidden
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10-.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,235 @@
|
|||
/**
|
||||
@license @nocompile
|
||||
Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
(function(){/*
|
||||
|
||||
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
'use strict';var q,aa="undefined"!=typeof window&&window===this?this:"undefined"!=typeof global&&null!=global?global:this,ba="function"==typeof Object.defineProperties?Object.defineProperty:function(a,b,c){a!=Array.prototype&&a!=Object.prototype&&(a[b]=c.value)};function ca(){ca=function(){};aa.Symbol||(aa.Symbol=da)}var da=function(){var a=0;return function(b){return"jscomp_symbol_"+(b||"")+a++}}();
|
||||
function ea(){ca();var a=aa.Symbol.iterator;a||(a=aa.Symbol.iterator=aa.Symbol("iterator"));"function"!=typeof Array.prototype[a]&&ba(Array.prototype,a,{configurable:!0,writable:!0,value:function(){return fa(this)}});ea=function(){}}function fa(a){var b=0;return ha(function(){return b<a.length?{done:!1,value:a[b++]}:{done:!0}})}function ha(a){ea();a={next:a};a[aa.Symbol.iterator]=function(){return this};return a}function ia(a){ea();var b=a[Symbol.iterator];return b?b.call(a):fa(a)}
|
||||
function ja(a){for(var b,c=[];!(b=a.next()).done;)c.push(b.value);return c}
|
||||
(function(){if(!function(){var a=document.createEvent("Event");a.initEvent("foo",!0,!0);a.preventDefault();return a.defaultPrevented}()){var a=Event.prototype.preventDefault;Event.prototype.preventDefault=function(){this.cancelable&&(a.call(this),Object.defineProperty(this,"defaultPrevented",{get:function(){return!0},configurable:!0}))}}var b=/Trident/.test(navigator.userAgent);if(!window.CustomEvent||b&&"function"!==typeof window.CustomEvent)window.CustomEvent=function(a,b){b=b||{};var c=document.createEvent("CustomEvent");
|
||||
c.initCustomEvent(a,!!b.bubbles,!!b.cancelable,b.detail);return c},window.CustomEvent.prototype=window.Event.prototype;if(!window.Event||b&&"function"!==typeof window.Event){var c=window.Event;window.Event=function(a,b){b=b||{};var c=document.createEvent("Event");c.initEvent(a,!!b.bubbles,!!b.cancelable);return c};if(c)for(var d in c)window.Event[d]=c[d];window.Event.prototype=c.prototype}if(!window.MouseEvent||b&&"function"!==typeof window.MouseEvent){b=window.MouseEvent;window.MouseEvent=function(a,
|
||||
b){b=b||{};var c=document.createEvent("MouseEvent");c.initMouseEvent(a,!!b.bubbles,!!b.cancelable,b.view||window,b.detail,b.screenX,b.screenY,b.clientX,b.clientY,b.ctrlKey,b.altKey,b.shiftKey,b.metaKey,b.button,b.relatedTarget);return c};if(b)for(d in b)window.MouseEvent[d]=b[d];window.MouseEvent.prototype=b.prototype}Array.from||(Array.from=function(a){return[].slice.call(a)});Object.assign||(Object.assign=function(a,b){for(var c=[].slice.call(arguments,1),d=0,e;d<c.length;d++)if(e=c[d])for(var f=
|
||||
a,n=e,r=Object.getOwnPropertyNames(n),G=0;G<r.length;G++)e=r[G],f[e]=n[e];return a})})(window.WebComponents);(function(){function a(){}function b(a,b){if(!a.childNodes.length)return[];switch(a.nodeType){case Node.DOCUMENT_NODE:return G.call(a,b);case Node.DOCUMENT_FRAGMENT_NODE:return x.call(a,b);default:return r.call(a,b)}}var c="undefined"===typeof HTMLTemplateElement,d=!(document.createDocumentFragment().cloneNode()instanceof DocumentFragment),e=!1;/Trident/.test(navigator.userAgent)&&function(){function a(a,b){if(a instanceof DocumentFragment)for(var d;d=a.firstChild;)c.call(this,d,b);else c.call(this,
|
||||
a,b);return a}e=!0;var b=Node.prototype.cloneNode;Node.prototype.cloneNode=function(a){a=b.call(this,a);this instanceof DocumentFragment&&(a.__proto__=DocumentFragment.prototype);return a};DocumentFragment.prototype.querySelectorAll=HTMLElement.prototype.querySelectorAll;DocumentFragment.prototype.querySelector=HTMLElement.prototype.querySelector;Object.defineProperties(DocumentFragment.prototype,{nodeType:{get:function(){return Node.DOCUMENT_FRAGMENT_NODE},configurable:!0},localName:{get:function(){},
|
||||
configurable:!0},nodeName:{get:function(){return"#document-fragment"},configurable:!0}});var c=Node.prototype.insertBefore;Node.prototype.insertBefore=a;var d=Node.prototype.appendChild;Node.prototype.appendChild=function(b){b instanceof DocumentFragment?a.call(this,b,null):d.call(this,b);return b};var f=Node.prototype.removeChild,g=Node.prototype.replaceChild;Node.prototype.replaceChild=function(b,c){b instanceof DocumentFragment?(a.call(this,b,c),f.call(this,c)):g.call(this,b,c);return c};Document.prototype.createDocumentFragment=
|
||||
function(){var a=this.createElement("df");a.__proto__=DocumentFragment.prototype;return a};var h=Document.prototype.importNode;Document.prototype.importNode=function(a,b){b=h.call(this,a,b||!1);a instanceof DocumentFragment&&(b.__proto__=DocumentFragment.prototype);return b}}();var f=Node.prototype.cloneNode,g=Document.prototype.createElement,h=Document.prototype.importNode,k=Node.prototype.removeChild,m=Node.prototype.appendChild,n=Node.prototype.replaceChild,r=Element.prototype.querySelectorAll,
|
||||
G=Document.prototype.querySelectorAll,x=DocumentFragment.prototype.querySelectorAll,v=function(){if(!c){var a=document.createElement("template"),b=document.createElement("template");b.content.appendChild(document.createElement("div"));a.content.appendChild(b);a=a.cloneNode(!0);return 0===a.content.childNodes.length||0===a.content.firstChild.content.childNodes.length||d}}();if(c){var U=document.implementation.createHTMLDocument("template"),Dc=!0,xa=document.createElement("style");xa.textContent="template{display:none;}";
|
||||
var Ec=document.head;Ec.insertBefore(xa,Ec.firstElementChild);a.prototype=Object.create(HTMLElement.prototype);var mf=!document.createElement("div").hasOwnProperty("innerHTML");a.R=function(b){if(!b.content&&b.namespaceURI===document.documentElement.namespaceURI){b.content=U.createDocumentFragment();for(var c;c=b.firstChild;)m.call(b.content,c);if(mf)b.__proto__=a.prototype;else if(b.cloneNode=function(b){return a.a(this,b)},Dc)try{p(b),Fc(b)}catch(zh){Dc=!1}a.b(b.content)}};var p=function(b){Object.defineProperty(b,
|
||||
"innerHTML",{get:function(){return Gc(this)},set:function(b){U.body.innerHTML=b;for(a.b(U);this.content.firstChild;)k.call(this.content,this.content.firstChild);for(;U.body.firstChild;)m.call(this.content,U.body.firstChild)},configurable:!0})},Fc=function(a){Object.defineProperty(a,"outerHTML",{get:function(){return"<template>"+this.innerHTML+"</template>"},set:function(a){if(this.parentNode){U.body.innerHTML=a;for(a=this.ownerDocument.createDocumentFragment();U.body.firstChild;)m.call(a,U.body.firstChild);
|
||||
n.call(this.parentNode,a,this)}else throw Error("Failed to set the 'outerHTML' property on 'Element': This element has no parent node.");},configurable:!0})};p(a.prototype);Fc(a.prototype);a.b=function(c){c=b(c,"template");for(var d=0,e=c.length,f;d<e&&(f=c[d]);d++)a.R(f)};document.addEventListener("DOMContentLoaded",function(){a.b(document)});Document.prototype.createElement=function(){var b=g.apply(this,arguments);"template"===b.localName&&a.R(b);return b};var nf=/[&\u00A0"]/g,kb=/[&\u00A0<>]/g,
|
||||
l=function(a){switch(a){case "&":return"&";case "<":return"<";case ">":return">";case '"':return""";case "\u00a0":return" "}};xa=function(a){for(var b={},c=0;c<a.length;c++)b[a[c]]=!0;return b};var F=xa("area base br col command embed hr img input keygen link meta param source track wbr".split(" ")),of=xa("style script xmp iframe noembed noframes plaintext noscript".split(" ")),Gc=function(a,b){"template"===a.localName&&(a=a.content);for(var c="",d=b?b(a):a.childNodes,e=0,f=d.length,
|
||||
g;e<f&&(g=d[e]);e++){a:{var h=g;var k=a;var m=b;switch(h.nodeType){case Node.ELEMENT_NODE:for(var n=h.localName,v="<"+n,r=h.attributes,p=0;k=r[p];p++)v+=" "+k.name+'="'+k.value.replace(nf,l)+'"';v+=">";h=F[n]?v:v+Gc(h,m)+"</"+n+">";break a;case Node.TEXT_NODE:h=h.data;h=k&&of[k.localName]?h:h.replace(kb,l);break a;case Node.COMMENT_NODE:h="\x3c!--"+h.data+"--\x3e";break a;default:throw window.console.error(h),Error("not implemented");}}c+=h}return c}}if(c||v){a.a=function(a,b){var c=f.call(a,!1);
|
||||
this.R&&this.R(c);b&&(m.call(c.content,f.call(a.content,!0)),lb(c.content,a.content));return c};var lb=function(c,d){if(d.querySelectorAll&&(d=b(d,"template"),0!==d.length)){c=b(c,"template");for(var e=0,f=c.length,g,h;e<f;e++)h=d[e],g=c[e],a&&a.R&&a.R(h),n.call(g.parentNode,pf.call(h,!0),g)}},pf=Node.prototype.cloneNode=function(b){if(!e&&d&&this instanceof DocumentFragment)if(b)var c=qf.call(this.ownerDocument,this,!0);else return this.ownerDocument.createDocumentFragment();else this.nodeType===
|
||||
Node.ELEMENT_NODE&&"template"===this.localName&&this.namespaceURI==document.documentElement.namespaceURI?c=a.a(this,b):c=f.call(this,b);b&&lb(c,this);return c},qf=Document.prototype.importNode=function(c,d){d=d||!1;if("template"===c.localName)return a.a(c,d);var e=h.call(this,c,d);if(d){lb(e,c);c=b(e,'script:not([type]),script[type="application/javascript"],script[type="text/javascript"]');for(var f,k=0;k<c.length;k++){f=c[k];d=g.call(document,"script");d.textContent=f.textContent;for(var m=f.attributes,
|
||||
l=0,v;l<m.length;l++)v=m[l],d.setAttribute(v.name,v.value);n.call(f.parentNode,d,f)}}return e}}c&&(window.HTMLTemplateElement=a)})();var ka;Array.isArray?ka=Array.isArray:ka=function(a){return"[object Array]"===Object.prototype.toString.call(a)};var la=ka;var ma=0,na,oa="undefined"!==typeof window?window:void 0,pa=oa||{},qa=pa.MutationObserver||pa.WebKitMutationObserver,ra="undefined"===typeof self&&"undefined"!==typeof process&&"[object process]"==={}.toString.call(process),sa="undefined"!==typeof Uint8ClampedArray&&"undefined"!==typeof importScripts&&"undefined"!==typeof MessageChannel;function ta(){return"undefined"!==typeof na?function(){na(ua)}:va()}
|
||||
function wa(){var a=0,b=new qa(ua),c=document.createTextNode("");b.observe(c,{characterData:!0});return function(){c.data=a=++a%2}}function ya(){var a=new MessageChannel;a.port1.onmessage=ua;return function(){return a.port2.postMessage(0)}}function va(){var a=setTimeout;return function(){return a(ua,1)}}var za=Array(1E3);function ua(){for(var a=0;a<ma;a+=2)(0,za[a])(za[a+1]),za[a]=void 0,za[a+1]=void 0;ma=0}var Aa,Ba;
|
||||
if(ra)Ba=function(){return process.xb(ua)};else{var Ca;if(qa)Ca=wa();else{var Da;if(sa)Da=ya();else{var Ea;if(void 0===oa&&"function"===typeof require)try{var Fa=require("vertx");na=Fa.zb||Fa.yb;Ea=ta()}catch(a){Ea=va()}else Ea=va();Da=Ea}Ca=Da}Ba=Ca}Aa=Ba;function Ga(a,b){za[ma]=a;za[ma+1]=b;ma+=2;2===ma&&Aa()};function Ha(a,b){var c=this,d=new this.constructor(Ia);void 0===d[Ja]&&Ka(d);var e=c.o;if(e){var f=arguments[e-1];Ga(function(){return La(e,d,f,c.l)})}else Ma(c,d,a,b);return d};function Na(a){if(a&&"object"===typeof a&&a.constructor===this)return a;var b=new this(Ia);Oa(b,a);return b};var Ja=Math.random().toString(36).substring(16);function Ia(){}var Qa=new Pa;function Ra(a){try{return a.then}catch(b){return Qa.error=b,Qa}}function Sa(a,b,c,d){try{a.call(b,c,d)}catch(e){return e}}function Ta(a,b,c){Ga(function(a){var d=!1,f=Sa(c,b,function(c){d||(d=!0,b!==c?Oa(a,c):t(a,c))},function(b){d||(d=!0,u(a,b))});!d&&f&&(d=!0,u(a,f))},a)}function Ua(a,b){1===b.o?t(a,b.l):2===b.o?u(a,b.l):Ma(b,void 0,function(b){return Oa(a,b)},function(b){return u(a,b)})}
|
||||
function Va(a,b,c){b.constructor===a.constructor&&c===Ha&&b.constructor.resolve===Na?Ua(a,b):c===Qa?(u(a,Qa.error),Qa.error=null):void 0===c?t(a,b):"function"===typeof c?Ta(a,b,c):t(a,b)}function Oa(a,b){if(a===b)u(a,new TypeError("You cannot resolve a promise with itself"));else{var c=typeof b;null===b||"object"!==c&&"function"!==c?t(a,b):Va(a,b,Ra(b))}}function Wa(a){a.xa&&a.xa(a.l);Xa(a)}function t(a,b){void 0===a.o&&(a.l=b,a.o=1,0!==a.U.length&&Ga(Xa,a))}
|
||||
function u(a,b){void 0===a.o&&(a.o=2,a.l=b,Ga(Wa,a))}function Ma(a,b,c,d){var e=a.U,f=e.length;a.xa=null;e[f]=b;e[f+1]=c;e[f+2]=d;0===f&&a.o&&Ga(Xa,a)}function Xa(a){var b=a.U,c=a.o;if(0!==b.length){for(var d,e,f=a.l,g=0;g<b.length;g+=3)d=b[g],e=b[g+c],d?La(c,d,e,f):e(f);a.U.length=0}}function Pa(){this.error=null}var Ya=new Pa;
|
||||
function La(a,b,c,d){var e="function"===typeof c;if(e){try{var f=c(d)}catch(m){Ya.error=m,f=Ya}if(f===Ya){var g=!0;var h=f.error;f.error=null}else var k=!0;if(b===f){u(b,new TypeError("A promises callback cannot return that same promise."));return}}else f=d,k=!0;void 0===b.o&&(e&&k?Oa(b,f):g?u(b,h):1===a?t(b,f):2===a&&u(b,f))}function Za(a,b){try{b(function(b){Oa(a,b)},function(b){u(a,b)})}catch(c){u(a,c)}}var $a=0;function Ka(a){a[Ja]=$a++;a.o=void 0;a.l=void 0;a.U=[]};function ab(a,b){this.Na=a;this.N=new a(Ia);this.N[Ja]||Ka(this.N);if(la(b))if(this.$=this.length=b.length,this.l=Array(this.length),0===this.length)t(this.N,this.l);else{this.length=this.length||0;for(a=0;void 0===this.o&&a<b.length;a++)bb(this,b[a],a);0===this.$&&t(this.N,this.l)}else u(this.N,Error("Array Methods must be provided an Array"))}
|
||||
function bb(a,b,c){var d=a.Na,e=d.resolve;e===Na?(e=Ra(b),e===Ha&&void 0!==b.o?cb(a,b.o,c,b.l):"function"!==typeof e?(a.$--,a.l[c]=b):d===w?(d=new d(Ia),Va(d,b,e),db(a,d,c)):db(a,new d(function(a){return a(b)}),c)):db(a,e(b),c)}function cb(a,b,c,d){var e=a.N;void 0===e.o&&(a.$--,2===b?u(e,d):a.l[c]=d);0===a.$&&t(e,a.l)}function db(a,b,c){Ma(b,void 0,function(b){return cb(a,1,c,b)},function(b){return cb(a,2,c,b)})};function eb(a){return(new ab(this,a)).N};function fb(a){var b=this;return la(a)?new b(function(c,d){for(var e=a.length,f=0;f<e;f++)b.resolve(a[f]).then(c,d)}):new b(function(a,b){return b(new TypeError("You must pass an array to race."))})};function gb(a){var b=new this(Ia);u(b,a);return b};function w(a){this[Ja]=$a++;this.l=this.o=void 0;this.U=[];if(Ia!==a){if("function"!==typeof a)throw new TypeError("You must pass a resolver function as the first argument to the promise constructor");if(this instanceof w)Za(this,a);else throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.");}}w.prototype={constructor:w,then:Ha,a:function(a){return this.then(null,a)}};/*
|
||||
|
||||
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
window.Promise||(window.Promise=w,w.prototype["catch"]=w.prototype.a,w.prototype.then=w.prototype.then,w.all=eb,w.race=fb,w.resolve=Na,w.reject=gb);/*
|
||||
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
window.WebComponents=window.WebComponents||{flags:{}};var hb=document.querySelector('script[src*="webcomponents-bundle"]'),ib=/wc-(.+)/,y={};if(!y.noOpts){location.search.slice(1).split("&").forEach(function(a){a=a.split("=");var b;a[0]&&(b=a[0].match(ib))&&(y[b[1]]=a[1]||!0)});if(hb)for(var jb=0,mb;mb=hb.attributes[jb];jb++)"src"!==mb.name&&(y[mb.name]=mb.value||!0);if(y.log&&y.log.split){var nb=y.log.split(",");y.log={};nb.forEach(function(a){y.log[a]=!0})}else y.log={}}
|
||||
window.WebComponents.flags=y;var ob=y.shadydom;ob&&(window.ShadyDOM=window.ShadyDOM||{},window.ShadyDOM.force=ob);var pb=y.register||y.ce;pb&&window.customElements&&(window.customElements.forcePolyfill=pb);/*
|
||||
|
||||
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
function qb(){this.Da=this.root=null;this.da=!1;this.L=this.Z=this.pa=this.assignedSlot=this.assignedNodes=this.S=null;this.childNodes=this.nextSibling=this.previousSibling=this.lastChild=this.firstChild=this.parentNode=this.V=void 0;this.Ia=this.va=!1}qb.prototype.toJSON=function(){return{}};function z(a){a.ka||(a.ka=new qb);return a.ka}function A(a){return a&&a.ka};var B=window.ShadyDOM||{};B.Ua=!(!Element.prototype.attachShadow||!Node.prototype.getRootNode);var rb=Object.getOwnPropertyDescriptor(Node.prototype,"firstChild");B.I=!!(rb&&rb.configurable&&rb.get);B.Ba=B.force||!B.Ua;var sb=navigator.userAgent.match("Trident"),tb=navigator.userAgent.match("Edge");void 0===B.Fa&&(B.Fa=B.I&&(sb||tb));function ub(a){return(a=A(a))&&void 0!==a.firstChild}function C(a){return"ShadyRoot"===a.Oa}function vb(a){a=a.getRootNode();if(C(a))return a}
|
||||
var wb=Element.prototype,xb=wb.matches||wb.matchesSelector||wb.mozMatchesSelector||wb.msMatchesSelector||wb.oMatchesSelector||wb.webkitMatchesSelector;function yb(a,b){if(a&&b)for(var c=Object.getOwnPropertyNames(b),d=0,e;d<c.length&&(e=c[d]);d++){var f=Object.getOwnPropertyDescriptor(b,e);f&&Object.defineProperty(a,e,f)}}function zb(a,b){for(var c=[],d=1;d<arguments.length;++d)c[d-1]=arguments[d];for(d=0;d<c.length;d++)yb(a,c[d]);return a}function Ab(a,b){for(var c in b)a[c]=b[c]}
|
||||
var Bb=document.createTextNode(""),Cb=0,Db=[];(new MutationObserver(function(){for(;Db.length;)try{Db.shift()()}catch(a){throw Bb.textContent=Cb++,a;}})).observe(Bb,{characterData:!0});function Eb(a){Db.push(a);Bb.textContent=Cb++}var Fb=!!document.contains;function Gb(a,b){for(;b;){if(b==a)return!0;b=b.parentNode}return!1};var Hb=[],Ib;function Jb(a){Ib||(Ib=!0,Eb(Kb));Hb.push(a)}function Kb(){Ib=!1;for(var a=!!Hb.length;Hb.length;)Hb.shift()();return a}Kb.list=Hb;function Lb(){this.a=!1;this.addedNodes=[];this.removedNodes=[];this.ca=new Set}function Mb(a){a.a||(a.a=!0,Eb(function(){Nb(a)}))}function Nb(a){if(a.a){a.a=!1;var b=a.takeRecords();b.length&&a.ca.forEach(function(a){a(b)})}}Lb.prototype.takeRecords=function(){if(this.addedNodes.length||this.removedNodes.length){var a=[{addedNodes:this.addedNodes,removedNodes:this.removedNodes}];this.addedNodes=[];this.removedNodes=[];return a}return[]};
|
||||
function Ob(a,b){var c=z(a);c.S||(c.S=new Lb);c.S.ca.add(b);var d=c.S;return{La:b,P:d,Pa:a,takeRecords:function(){return d.takeRecords()}}}function Pb(a){var b=a&&a.P;b&&(b.ca.delete(a.La),b.ca.size||(z(a.Pa).S=null))}
|
||||
function Qb(a,b){var c=b.getRootNode();return a.map(function(a){var b=c===a.target.getRootNode();if(b&&a.addedNodes){if(b=Array.from(a.addedNodes).filter(function(a){return c===a.getRootNode()}),b.length)return a=Object.create(a),Object.defineProperty(a,"addedNodes",{value:b,configurable:!0}),a}else if(b)return a}).filter(function(a){return a})};var D={},Rb=Element.prototype.insertBefore,Sb=Element.prototype.replaceChild,Tb=Element.prototype.removeChild,Ub=Element.prototype.setAttribute,Vb=Element.prototype.removeAttribute,Wb=Element.prototype.cloneNode,Xb=Document.prototype.importNode,Yb=Element.prototype.addEventListener,Zb=Element.prototype.removeEventListener,$b=Window.prototype.addEventListener,ac=Window.prototype.removeEventListener,bc=Element.prototype.dispatchEvent,cc=Node.prototype.contains||HTMLElement.prototype.contains,dc=Document.prototype.getElementById,
|
||||
ec=Element.prototype.querySelector,fc=DocumentFragment.prototype.querySelector,gc=Document.prototype.querySelector,hc=Element.prototype.querySelectorAll,ic=DocumentFragment.prototype.querySelectorAll,jc=Document.prototype.querySelectorAll;D.appendChild=Element.prototype.appendChild;D.insertBefore=Rb;D.replaceChild=Sb;D.removeChild=Tb;D.setAttribute=Ub;D.removeAttribute=Vb;D.cloneNode=Wb;D.importNode=Xb;D.addEventListener=Yb;D.removeEventListener=Zb;D.eb=$b;D.fb=ac;D.dispatchEvent=bc;D.contains=cc;
|
||||
D.getElementById=dc;D.ob=ec;D.sb=fc;D.mb=gc;D.querySelector=function(a){switch(this.nodeType){case Node.ELEMENT_NODE:return ec.call(this,a);case Node.DOCUMENT_NODE:return gc.call(this,a);default:return fc.call(this,a)}};D.pb=hc;D.tb=ic;D.nb=jc;D.querySelectorAll=function(a){switch(this.nodeType){case Node.ELEMENT_NODE:return hc.call(this,a);case Node.DOCUMENT_NODE:return jc.call(this,a);default:return ic.call(this,a)}};var kc=/[&\u00A0"]/g,lc=/[&\u00A0<>]/g;function mc(a){switch(a){case "&":return"&";case "<":return"<";case ">":return">";case '"':return""";case "\u00a0":return" "}}function nc(a){for(var b={},c=0;c<a.length;c++)b[a[c]]=!0;return b}var oc=nc("area base br col command embed hr img input keygen link meta param source track wbr".split(" ")),pc=nc("style script xmp iframe noembed noframes plaintext noscript".split(" "));
|
||||
function qc(a,b){"template"===a.localName&&(a=a.content);for(var c="",d=b?b(a):a.childNodes,e=0,f=d.length,g;e<f&&(g=d[e]);e++){a:{var h=g;var k=a;var m=b;switch(h.nodeType){case Node.ELEMENT_NODE:for(var n=h.localName,r="<"+n,G=h.attributes,x=0;k=G[x];x++)r+=" "+k.name+'="'+k.value.replace(kc,mc)+'"';r+=">";h=oc[n]?r:r+qc(h,m)+"</"+n+">";break a;case Node.TEXT_NODE:h=h.data;h=k&&pc[k.localName]?h:h.replace(lc,mc);break a;case Node.COMMENT_NODE:h="\x3c!--"+h.data+"--\x3e";break a;default:throw window.console.error(h),
|
||||
Error("not implemented");}}c+=h}return c};var E={},H=document.createTreeWalker(document,NodeFilter.SHOW_ALL,null,!1),I=document.createTreeWalker(document,NodeFilter.SHOW_ELEMENT,null,!1);function rc(a){var b=[];H.currentNode=a;for(a=H.firstChild();a;)b.push(a),a=H.nextSibling();return b}E.parentNode=function(a){H.currentNode=a;return H.parentNode()};E.firstChild=function(a){H.currentNode=a;return H.firstChild()};E.lastChild=function(a){H.currentNode=a;return H.lastChild()};E.previousSibling=function(a){H.currentNode=a;return H.previousSibling()};
|
||||
E.nextSibling=function(a){H.currentNode=a;return H.nextSibling()};E.childNodes=rc;E.parentElement=function(a){I.currentNode=a;return I.parentNode()};E.firstElementChild=function(a){I.currentNode=a;return I.firstChild()};E.lastElementChild=function(a){I.currentNode=a;return I.lastChild()};E.previousElementSibling=function(a){I.currentNode=a;return I.previousSibling()};E.nextElementSibling=function(a){I.currentNode=a;return I.nextSibling()};
|
||||
E.children=function(a){var b=[];I.currentNode=a;for(a=I.firstChild();a;)b.push(a),a=I.nextSibling();return b};E.innerHTML=function(a){return qc(a,function(a){return rc(a)})};E.textContent=function(a){switch(a.nodeType){case Node.ELEMENT_NODE:case Node.DOCUMENT_FRAGMENT_NODE:a=document.createTreeWalker(a,NodeFilter.SHOW_TEXT,null,!1);for(var b="",c;c=a.nextNode();)b+=c.nodeValue;return b;default:return a.nodeValue}};var J={},sc=B.I,tc=[Node.prototype,Element.prototype,HTMLElement.prototype];function K(a){var b;a:{for(b=0;b<tc.length;b++){var c=tc[b];if(c.hasOwnProperty(a)){b=c;break a}}b=void 0}if(!b)throw Error("Could not find descriptor for "+a);return Object.getOwnPropertyDescriptor(b,a)}
|
||||
var L=sc?{parentNode:K("parentNode"),firstChild:K("firstChild"),lastChild:K("lastChild"),previousSibling:K("previousSibling"),nextSibling:K("nextSibling"),childNodes:K("childNodes"),parentElement:K("parentElement"),previousElementSibling:K("previousElementSibling"),nextElementSibling:K("nextElementSibling"),innerHTML:K("innerHTML"),textContent:K("textContent"),firstElementChild:K("firstElementChild"),lastElementChild:K("lastElementChild"),children:K("children")}:{},uc=sc?{firstElementChild:Object.getOwnPropertyDescriptor(DocumentFragment.prototype,
|
||||
"firstElementChild"),lastElementChild:Object.getOwnPropertyDescriptor(DocumentFragment.prototype,"lastElementChild"),children:Object.getOwnPropertyDescriptor(DocumentFragment.prototype,"children")}:{},vc=sc?{firstElementChild:Object.getOwnPropertyDescriptor(Document.prototype,"firstElementChild"),lastElementChild:Object.getOwnPropertyDescriptor(Document.prototype,"lastElementChild"),children:Object.getOwnPropertyDescriptor(Document.prototype,"children")}:{};J.Ca=L;J.rb=uc;J.lb=vc;J.parentNode=function(a){return L.parentNode.get.call(a)};
|
||||
J.firstChild=function(a){return L.firstChild.get.call(a)};J.lastChild=function(a){return L.lastChild.get.call(a)};J.previousSibling=function(a){return L.previousSibling.get.call(a)};J.nextSibling=function(a){return L.nextSibling.get.call(a)};J.childNodes=function(a){return Array.prototype.slice.call(L.childNodes.get.call(a))};J.parentElement=function(a){return L.parentElement.get.call(a)};J.previousElementSibling=function(a){return L.previousElementSibling.get.call(a)};J.nextElementSibling=function(a){return L.nextElementSibling.get.call(a)};
|
||||
J.innerHTML=function(a){return L.innerHTML.get.call(a)};J.textContent=function(a){return L.textContent.get.call(a)};J.children=function(a){switch(a.nodeType){case Node.DOCUMENT_FRAGMENT_NODE:a=uc.children.get.call(a);break;case Node.DOCUMENT_NODE:a=vc.children.get.call(a);break;default:a=L.children.get.call(a)}return Array.prototype.slice.call(a)};
|
||||
J.firstElementChild=function(a){switch(a.nodeType){case Node.DOCUMENT_FRAGMENT_NODE:return uc.firstElementChild.get.call(a);case Node.DOCUMENT_NODE:return vc.firstElementChild.get.call(a);default:return L.firstElementChild.get.call(a)}};J.lastElementChild=function(a){switch(a.nodeType){case Node.DOCUMENT_FRAGMENT_NODE:return uc.lastElementChild.get.call(a);case Node.DOCUMENT_NODE:return vc.lastElementChild.get.call(a);default:return L.lastElementChild.get.call(a)}};var M=B.Fa?J:E;function wc(a){for(;a.firstChild;)a.removeChild(a.firstChild)}
|
||||
var xc=B.I,yc=document.implementation.createHTMLDocument("inert"),zc=Object.getOwnPropertyDescriptor(Node.prototype,"isConnected"),Ac=zc&&zc.get,Bc=Object.getOwnPropertyDescriptor(Document.prototype,"activeElement"),Cc={parentElement:{get:function(){var a=A(this);(a=a&&a.parentNode)&&a.nodeType!==Node.ELEMENT_NODE&&(a=null);return void 0!==a?a:M.parentElement(this)},configurable:!0},parentNode:{get:function(){var a=A(this);a=a&&a.parentNode;return void 0!==a?a:M.parentNode(this)},configurable:!0},
|
||||
nextSibling:{get:function(){var a=A(this);a=a&&a.nextSibling;return void 0!==a?a:M.nextSibling(this)},configurable:!0},previousSibling:{get:function(){var a=A(this);a=a&&a.previousSibling;return void 0!==a?a:M.previousSibling(this)},configurable:!0},nextElementSibling:{get:function(){var a=A(this);if(a&&void 0!==a.nextSibling){for(a=this.nextSibling;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.nextSibling;return a}return M.nextElementSibling(this)},configurable:!0},previousElementSibling:{get:function(){var a=
|
||||
A(this);if(a&&void 0!==a.previousSibling){for(a=this.previousSibling;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.previousSibling;return a}return M.previousElementSibling(this)},configurable:!0}},Hc={className:{get:function(){return this.getAttribute("class")||""},set:function(a){this.setAttribute("class",a)},configurable:!0}},Ic={childNodes:{get:function(){if(ub(this)){var a=A(this);if(!a.childNodes){a.childNodes=[];for(var b=this.firstChild;b;b=b.nextSibling)a.childNodes.push(b)}var c=a.childNodes}else c=
|
||||
M.childNodes(this);c.item=function(a){return c[a]};return c},configurable:!0},childElementCount:{get:function(){return this.children.length},configurable:!0},firstChild:{get:function(){var a=A(this);a=a&&a.firstChild;return void 0!==a?a:M.firstChild(this)},configurable:!0},lastChild:{get:function(){var a=A(this);a=a&&a.lastChild;return void 0!==a?a:M.lastChild(this)},configurable:!0},textContent:{get:function(){if(ub(this)){for(var a=[],b=0,c=this.childNodes,d;d=c[b];b++)d.nodeType!==Node.COMMENT_NODE&&
|
||||
a.push(d.textContent);return a.join("")}return M.textContent(this)},set:function(a){if("undefined"===typeof a||null===a)a="";switch(this.nodeType){case Node.ELEMENT_NODE:case Node.DOCUMENT_FRAGMENT_NODE:if(!ub(this)&&xc){var b=this.firstChild;(b!=this.lastChild||b&&b.nodeType!=Node.TEXT_NODE)&&wc(this);J.Ca.textContent.set.call(this,a)}else wc(this),(0<a.length||this.nodeType===Node.ELEMENT_NODE)&&this.appendChild(document.createTextNode(a));break;default:this.nodeValue=a}},configurable:!0},firstElementChild:{get:function(){var a=
|
||||
A(this);if(a&&void 0!==a.firstChild){for(a=this.firstChild;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.nextSibling;return a}return M.firstElementChild(this)},configurable:!0},lastElementChild:{get:function(){var a=A(this);if(a&&void 0!==a.lastChild){for(a=this.lastChild;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.previousSibling;return a}return M.lastElementChild(this)},configurable:!0},children:{get:function(){var a;ub(this)?a=Array.prototype.filter.call(this.childNodes,function(a){return a.nodeType===Node.ELEMENT_NODE}):
|
||||
a=M.children(this);a.item=function(b){return a[b]};return a},configurable:!0},innerHTML:{get:function(){return ub(this)?qc("template"===this.localName?this.content:this):M.innerHTML(this)},set:function(a){var b="template"===this.localName?this.content:this;wc(b);var c=this.localName;c&&"template"!==c||(c="div");c=yc.createElement(c);for(xc?J.Ca.innerHTML.set.call(c,a):c.innerHTML=a;c.firstChild;)b.appendChild(c.firstChild)},configurable:!0}},Jc={shadowRoot:{get:function(){var a=A(this);return a&&
|
||||
a.Da||null},configurable:!0}},Kc={activeElement:{get:function(){var a=Bc&&Bc.get?Bc.get.call(document):B.I?void 0:document.activeElement;if(a&&a.nodeType){var b=!!C(this);if(this===document||b&&this.host!==a&&D.contains.call(this.host,a)){for(b=vb(a);b&&b!==this;)a=b.host,b=vb(a);a=this===document?b?null:a:b===this?a:null}else a=null}else a=null;return a},set:function(){},configurable:!0}};
|
||||
function N(a,b,c){for(var d in b){var e=Object.getOwnPropertyDescriptor(a,d);e&&e.configurable||!e&&c?Object.defineProperty(a,d,b[d]):c&&console.warn("Could not define",d,"on",a)}}function Lc(a){N(a,Cc);N(a,Hc);N(a,Ic);N(a,Kc)}
|
||||
function Mc(){var a=Nc.prototype;a.__proto__=DocumentFragment.prototype;N(a,Cc,!0);N(a,Ic,!0);N(a,Kc,!0);Object.defineProperties(a,{nodeType:{value:Node.DOCUMENT_FRAGMENT_NODE,configurable:!0},nodeName:{value:"#document-fragment",configurable:!0},nodeValue:{value:null,configurable:!0}});["localName","namespaceURI","prefix"].forEach(function(b){Object.defineProperty(a,b,{value:void 0,configurable:!0})});["ownerDocument","baseURI","isConnected"].forEach(function(b){Object.defineProperty(a,b,{get:function(){return this.host[b]},
|
||||
configurable:!0})})}var Oc=B.I?function(){}:function(a){var b=z(a);b.va||(b.va=!0,N(a,Cc,!0),N(a,Hc,!0))},Pc=B.I?function(){}:function(a){z(a).Ia||(N(a,Ic,!0),N(a,Jc,!0))};var Qc=M.childNodes;function Rc(a,b,c){Oc(a);c=c||null;var d=z(a),e=z(b),f=c?z(c):null;d.previousSibling=c?f.previousSibling:b.lastChild;if(f=A(d.previousSibling))f.nextSibling=a;if(f=A(d.nextSibling=c))f.previousSibling=a;d.parentNode=b;c?c===e.firstChild&&(e.firstChild=a):(e.lastChild=a,e.firstChild||(e.firstChild=a));e.childNodes=null}
|
||||
function Sc(a,b){var c=z(a);if(void 0===c.firstChild)for(b=b||Qc(a),c.firstChild=b[0]||null,c.lastChild=b[b.length-1]||null,Pc(a),c=0;c<b.length;c++){var d=b[c],e=z(d);e.parentNode=a;e.nextSibling=b[c+1]||null;e.previousSibling=b[c-1]||null;Oc(d)}};var Tc=M.parentNode;
|
||||
function Uc(a,b,c){if(b===a)throw Error("Failed to execute 'appendChild' on 'Node': The new child element contains the parent.");if(c){var d=A(c);d=d&&d.parentNode;if(void 0!==d&&d!==a||void 0===d&&Tc(c)!==a)throw Error("Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.");}if(c===b)return b;b.parentNode&&Vc(b.parentNode,b);var e,f;if(!b.__noInsertionPoint){if(f=e=vb(a)){var g;"slot"===b.localName?g=[b]:b.querySelectorAll&&
|
||||
(g=b.querySelectorAll("slot"));f=g&&g.length?g:void 0}f&&(g=e,d=f,g.a=g.a||[],g.m=g.m||[],g.w=g.w||{},g.a.push.apply(g.a,[].concat(d instanceof Array?d:ja(ia(d)))))}("slot"===a.localName||f)&&(e=e||vb(a))&&Wc(e);if(ub(a)){e=c;Pc(a);f=z(a);void 0!==f.firstChild&&(f.childNodes=null);if(b.nodeType===Node.DOCUMENT_FRAGMENT_NODE){f=b.childNodes;for(g=0;g<f.length;g++)Rc(f[g],a,e);e=z(b);f=void 0!==e.firstChild?null:void 0;e.firstChild=e.lastChild=f;e.childNodes=f}else Rc(b,a,e);e=A(a);if(Xc(a)){Wc(e.root);
|
||||
var h=!0}else e.root&&(h=!0)}h||(h=C(a)?a.host:a,c?(c=Yc(c),D.insertBefore.call(h,b,c)):D.appendChild.call(h,b));Zc(a,b);return b}
|
||||
function Vc(a,b){if(b.parentNode!==a)throw Error("The node to be removed is not a child of this node: "+b);var c=vb(b),d=A(a);if(ub(a)){var e=z(b),f=z(a);b===f.firstChild&&(f.firstChild=e.nextSibling);b===f.lastChild&&(f.lastChild=e.previousSibling);var g=e.previousSibling,h=e.nextSibling;g&&(z(g).nextSibling=h);h&&(z(h).previousSibling=g);e.parentNode=e.previousSibling=e.nextSibling=void 0;void 0!==f.childNodes&&(f.childNodes=null);if(Xc(a)){Wc(d.root);var k=!0}}$c(b);if(c){(e=a&&"slot"===a.localName)&&
|
||||
(k=!0);if(c.m){ad(c);f=c.w;for(v in f)for(g=f[v],h=0;h<g.length;h++){var m=g[h];if(Gb(b,m)){g.splice(h,1);var n=c.m.indexOf(m);0<=n&&c.m.splice(n,1);h--;n=A(m);if(m=n.L)for(var r=0;r<m.length;r++){var G=m[r],x=bd(G);x&&D.removeChild.call(x,G)}n.L=[];n.assignedNodes=[];n=!0}}var v=n}else v=void 0;(v||e)&&Wc(c)}k||(k=C(a)?a.host:a,(!d.root&&"slot"!==b.localName||k===Tc(b))&&D.removeChild.call(k,b));Zc(a,null,b);return b}
|
||||
function $c(a){var b=A(a);if(b&&void 0!==b.V){b=a.childNodes;for(var c=0,d=b.length,e;c<d&&(e=b[c]);c++)$c(e)}if(a=A(a))a.V=void 0}function Yc(a){var b=a;a&&"slot"===a.localName&&(b=(b=(b=A(a))&&b.L)&&b.length?b[0]:Yc(a.nextSibling));return b}function Xc(a){return(a=(a=A(a))&&a.root)&&cd(a)}
|
||||
function dd(a,b){if("slot"===b)a=a.parentNode,Xc(a)&&Wc(A(a).root);else if("slot"===a.localName&&"name"===b&&(b=vb(a))){if(b.m){var c=a.Ja,d=ed(a);if(d!==c){c=b.w[c];var e=c.indexOf(a);0<=e&&c.splice(e,1);c=b.w[d]||(b.w[d]=[]);c.push(a);1<c.length&&(b.w[d]=fd(c))}}Wc(b)}}function Zc(a,b,c){if(a=(a=A(a))&&a.S)b&&a.addedNodes.push(b),c&&a.removedNodes.push(c),Mb(a)}
|
||||
function gd(a){if(a&&a.nodeType){var b=z(a),c=b.V;void 0===c&&(C(a)?(c=a,b.V=c):(c=(c=a.parentNode)?gd(c):a,D.contains.call(document.documentElement,a)&&(b.V=c)));return c}}function hd(a,b,c){var d=[];id(a.childNodes,b,c,d);return d}function id(a,b,c,d){for(var e=0,f=a.length,g;e<f&&(g=a[e]);e++){var h;if(h=g.nodeType===Node.ELEMENT_NODE){h=g;var k=b,m=c,n=d,r=k(h);r&&n.push(h);m&&m(r)?h=r:(id(h.childNodes,k,m,n),h=void 0)}if(h)break}}var jd=null;
|
||||
function kd(a,b,c){jd||(jd=window.ShadyCSS&&window.ShadyCSS.ScopingShim);jd&&"class"===b?jd.setElementClass(a,c):(D.setAttribute.call(a,b,c),dd(a,b))}function ld(a,b){if(a.ownerDocument!==document)return D.importNode.call(document,a,b);var c=D.importNode.call(document,a,!1);if(b){a=a.childNodes;b=0;for(var d;b<a.length;b++)d=ld(a[b],!0),c.appendChild(d)}return c};var md="__eventWrappers"+Date.now(),nd={blur:!0,focus:!0,focusin:!0,focusout:!0,click:!0,dblclick:!0,mousedown:!0,mouseenter:!0,mouseleave:!0,mousemove:!0,mouseout:!0,mouseover:!0,mouseup:!0,wheel:!0,beforeinput:!0,input:!0,keydown:!0,keyup:!0,compositionstart:!0,compositionupdate:!0,compositionend:!0,touchstart:!0,touchend:!0,touchmove:!0,touchcancel:!0,pointerover:!0,pointerenter:!0,pointerdown:!0,pointermove:!0,pointerup:!0,pointercancel:!0,pointerout:!0,pointerleave:!0,gotpointercapture:!0,lostpointercapture:!0,
|
||||
dragstart:!0,drag:!0,dragenter:!0,dragleave:!0,dragover:!0,drop:!0,dragend:!0,DOMActivate:!0,DOMFocusIn:!0,DOMFocusOut:!0,keypress:!0};function od(a,b){var c=[],d=a;for(a=a===window?window:a.getRootNode();d;)c.push(d),d=d.assignedSlot?d.assignedSlot:d.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&d.host&&(b||d!==a)?d.host:d.parentNode;c[c.length-1]===document&&c.push(window);return c}
|
||||
function pd(a,b){if(!C)return a;a=od(a,!0);for(var c=0,d,e,f,g;c<b.length;c++)if(d=b[c],f=d===window?window:d.getRootNode(),f!==e&&(g=a.indexOf(f),e=f),!C(f)||-1<g)return d}
|
||||
var qd={get composed(){!1!==this.isTrusted&&void 0===this.ha&&(this.ha=nd[this.type]);return this.ha||!1},composedPath:function(){this.ta||(this.ta=od(this.__target,this.composed));return this.ta},get target(){return pd(this.currentTarget,this.composedPath())},get relatedTarget(){if(!this.ja)return null;this.wa||(this.wa=od(this.ja,!0));return pd(this.currentTarget,this.wa)},stopPropagation:function(){Event.prototype.stopPropagation.call(this);this.ia=!0},stopImmediatePropagation:function(){Event.prototype.stopImmediatePropagation.call(this);
|
||||
this.ia=this.Ha=!0}};function rd(a){function b(b,d){b=new a(b,d);b.ha=d&&!!d.composed;return b}Ab(b,a);b.prototype=a.prototype;return b}var sd={focus:!0,blur:!0};function td(a){return a.__target!==a.target||a.ja!==a.relatedTarget}function ud(a,b,c){if(c=b.__handlers&&b.__handlers[a.type]&&b.__handlers[a.type][c])for(var d=0,e;(e=c[d])&&(!td(a)||a.target!==a.relatedTarget)&&(e.call(b,a),!a.Ha);d++);}
|
||||
function vd(a){var b=a.composedPath();Object.defineProperty(a,"currentTarget",{get:function(){return d},configurable:!0});for(var c=b.length-1;0<=c;c--){var d=b[c];ud(a,d,"capture");if(a.ia)return}Object.defineProperty(a,"eventPhase",{get:function(){return Event.AT_TARGET}});var e;for(c=0;c<b.length;c++){d=b[c];var f=A(d);f=f&&f.root;if(0===c||f&&f===e)if(ud(a,d,"bubble"),d!==window&&(e=d.getRootNode()),a.ia)break}}
|
||||
function wd(a,b,c,d,e,f){for(var g=0;g<a.length;g++){var h=a[g],k=h.type,m=h.capture,n=h.once,r=h.passive;if(b===h.node&&c===k&&d===m&&e===n&&f===r)return g}return-1}
|
||||
function xd(a,b,c){if(b){var d=typeof b;if("function"===d||"object"===d)if("object"!==d||b.handleEvent&&"function"===typeof b.handleEvent){if(c&&"object"===typeof c){var e=!!c.capture;var f=!!c.once;var g=!!c.passive}else e=!!c,g=f=!1;var h=c&&c.la||this,k=b[md];if(k){if(-1<wd(k,h,a,e,f,g))return}else b[md]=[];k=function(e){f&&this.removeEventListener(a,b,c);e.__target||yd(e);if(h!==this){var g=Object.getOwnPropertyDescriptor(e,"currentTarget");Object.defineProperty(e,"currentTarget",{get:function(){return h},
|
||||
configurable:!0})}if(e.composed||-1<e.composedPath().indexOf(h))if(td(e)&&e.target===e.relatedTarget)e.eventPhase===Event.BUBBLING_PHASE&&e.stopImmediatePropagation();else if(e.eventPhase===Event.CAPTURING_PHASE||e.bubbles||e.target===h||h instanceof Window){var k="function"===d?b.call(h,e):b.handleEvent&&b.handleEvent(e);h!==this&&(g?(Object.defineProperty(e,"currentTarget",g),g=null):delete e.currentTarget);return k}};b[md].push({node:h,type:a,capture:e,once:f,passive:g,gb:k});sd[a]?(this.__handlers=
|
||||
this.__handlers||{},this.__handlers[a]=this.__handlers[a]||{capture:[],bubble:[]},this.__handlers[a][e?"capture":"bubble"].push(k)):(this instanceof Window?D.eb:D.addEventListener).call(this,a,k,c)}}}
|
||||
function zd(a,b,c){if(b){if(c&&"object"===typeof c){var d=!!c.capture;var e=!!c.once;var f=!!c.passive}else d=!!c,f=e=!1;var g=c&&c.la||this,h=void 0;var k=null;try{k=b[md]}catch(m){}k&&(e=wd(k,g,a,d,e,f),-1<e&&(h=k.splice(e,1)[0].gb,k.length||(b[md]=void 0)));(this instanceof Window?D.fb:D.removeEventListener).call(this,a,h||b,c);h&&sd[a]&&this.__handlers&&this.__handlers[a]&&(a=this.__handlers[a][d?"capture":"bubble"],h=a.indexOf(h),-1<h&&a.splice(h,1))}}
|
||||
function Ad(){for(var a in sd)window.addEventListener(a,function(a){a.__target||(yd(a),vd(a))},!0)}function yd(a){a.__target=a.target;a.ja=a.relatedTarget;if(B.I){var b=Object.getPrototypeOf(a);if(!b.hasOwnProperty("__patchProto")){var c=Object.create(b);c.ib=b;yb(c,qd);b.__patchProto=c}a.__proto__=b.__patchProto}else yb(a,qd)}var Bd=rd(window.Event),Cd=rd(window.CustomEvent),Dd=rd(window.MouseEvent);function Ed(a,b){return{index:a,W:[],ba:b}}
|
||||
function Fd(a,b,c,d){var e=0,f=0,g=0,h=0,k=Math.min(b-e,d-f);if(0==e&&0==f)a:{for(g=0;g<k;g++)if(a[g]!==c[g])break a;g=k}if(b==a.length&&d==c.length){h=a.length;for(var m=c.length,n=0;n<k-g&&Gd(a[--h],c[--m]);)n++;h=n}e+=g;f+=g;b-=h;d-=h;if(0==b-e&&0==d-f)return[];if(e==b){for(b=Ed(e,0);f<d;)b.W.push(c[f++]);return[b]}if(f==d)return[Ed(e,b-e)];k=e;g=f;d=d-g+1;h=b-k+1;b=Array(d);for(m=0;m<d;m++)b[m]=Array(h),b[m][0]=m;for(m=0;m<h;m++)b[0][m]=m;for(m=1;m<d;m++)for(n=1;n<h;n++)if(a[k+n-1]===c[g+m-1])b[m][n]=
|
||||
b[m-1][n-1];else{var r=b[m-1][n]+1,G=b[m][n-1]+1;b[m][n]=r<G?r:G}k=b.length-1;g=b[0].length-1;d=b[k][g];for(a=[];0<k||0<g;)0==k?(a.push(2),g--):0==g?(a.push(3),k--):(h=b[k-1][g-1],m=b[k-1][g],n=b[k][g-1],r=m<n?m<h?m:h:n<h?n:h,r==h?(h==d?a.push(0):(a.push(1),d=h),k--,g--):r==m?(a.push(3),k--,d=m):(a.push(2),g--,d=n));a.reverse();b=void 0;k=[];for(g=0;g<a.length;g++)switch(a[g]){case 0:b&&(k.push(b),b=void 0);e++;f++;break;case 1:b||(b=Ed(e,0));b.ba++;e++;b.W.push(c[f]);f++;break;case 2:b||(b=Ed(e,
|
||||
0));b.ba++;e++;break;case 3:b||(b=Ed(e,0)),b.W.push(c[f]),f++}b&&k.push(b);return k}function Gd(a,b){return a===b};var bd=M.parentNode,Hd=M.childNodes,Id={};function Jd(a){var b=[];do b.unshift(a);while(a=a.parentNode);return b}function Nc(a,b,c){if(a!==Id)throw new TypeError("Illegal constructor");this.Oa="ShadyRoot";a=Hd(b);this.host=b;this.b=c&&c.mode;Sc(b,a);c=A(b);c.root=this;c.Da="closed"!==this.b?this:null;c=z(this);c.firstChild=c.lastChild=c.parentNode=c.nextSibling=c.previousSibling=null;c.childNodes=[];this.aa=!1;this.a=this.w=this.m=null;c=0;for(var d=a.length;c<d;c++)D.removeChild.call(b,a[c])}
|
||||
function Wc(a){a.aa||(a.aa=!0,Jb(function(){return Kd(a)}))}function Kd(a){for(var b;a;){a.aa&&(b=a);a:{var c=a;a=c.host.getRootNode();if(C(a))for(var d=c.host.childNodes,e=0;e<d.length;e++)if(c=d[e],"slot"==c.localName)break a;a=void 0}}b&&b._renderRoot()}
|
||||
Nc.prototype._renderRoot=function(){this.aa=!1;if(this.m){ad(this);for(var a=0,b;a<this.m.length;a++){b=this.m[a];var c=A(b),d=c.assignedNodes;c.assignedNodes=[];c.L=[];if(c.pa=d)for(c=0;c<d.length;c++){var e=A(d[c]);e.Z=e.assignedSlot;e.assignedSlot===b&&(e.assignedSlot=null)}}for(b=this.host.firstChild;b;b=b.nextSibling)Ld(this,b);for(a=0;a<this.m.length;a++){b=this.m[a];d=A(b);if(!d.assignedNodes.length)for(c=b.firstChild;c;c=c.nextSibling)Ld(this,c,b);(c=(c=A(b.parentNode))&&c.root)&&cd(c)&&c._renderRoot();
|
||||
Md(this,d.L,d.assignedNodes);if(c=d.pa){for(e=0;e<c.length;e++)A(c[e]).Z=null;d.pa=null;c.length>d.assignedNodes.length&&(d.da=!0)}d.da&&(d.da=!1,Nd(this,b))}a=this.m;b=[];for(d=0;d<a.length;d++)c=a[d].parentNode,(e=A(c))&&e.root||!(0>b.indexOf(c))||b.push(c);for(a=0;a<b.length;a++){d=b[a];c=d===this?this.host:d;e=[];d=d.childNodes;for(var f=0;f<d.length;f++){var g=d[f];if("slot"==g.localName){g=A(g).L;for(var h=0;h<g.length;h++)e.push(g[h])}else e.push(g)}d=void 0;f=Hd(c);g=Fd(e,e.length,f,f.length);
|
||||
for(var k=h=0;h<g.length&&(d=g[h]);h++){for(var m=0,n;m<d.W.length&&(n=d.W[m]);m++)bd(n)===c&&D.removeChild.call(c,n),f.splice(d.index+k,1);k-=d.ba}for(k=0;k<g.length&&(d=g[k]);k++)for(h=f[d.index],m=d.index;m<d.index+d.ba;m++)n=e[m],D.insertBefore.call(c,n,h),f.splice(m,0,n)}}};function Ld(a,b,c){var d=z(b),e=d.Z;d.Z=null;c||(c=(a=a.w[b.slot||"__catchall"])&&a[0]);c?(z(c).assignedNodes.push(b),d.assignedSlot=c):d.assignedSlot=void 0;e!==d.assignedSlot&&d.assignedSlot&&(z(d.assignedSlot).da=!0)}
|
||||
function Md(a,b,c){for(var d=0,e;d<c.length&&(e=c[d]);d++)if("slot"==e.localName){var f=A(e).assignedNodes;f&&f.length&&Md(a,b,f)}else b.push(c[d])}function Nd(a,b){D.dispatchEvent.call(b,new Event("slotchange"));b=A(b);b.assignedSlot&&Nd(a,b.assignedSlot)}function ad(a){if(a.a&&a.a.length){for(var b=a.a,c,d=0;d<b.length;d++){var e=b[d];Sc(e);Sc(e.parentNode);var f=ed(e);a.w[f]?(c=c||{},c[f]=!0,a.w[f].push(e)):a.w[f]=[e];a.m.push(e)}if(c)for(var g in c)a.w[g]=fd(a.w[g]);a.a=[]}}
|
||||
function ed(a){var b=a.name||a.getAttribute("name")||"__catchall";return a.Ja=b}function fd(a){return a.sort(function(a,c){a=Jd(a);for(var b=Jd(c),e=0;e<a.length;e++){c=a[e];var f=b[e];if(c!==f)return a=Array.from(c.parentNode.childNodes),a.indexOf(c)-a.indexOf(f)}})}function cd(a){ad(a);return!(!a.m||!a.m.length)};function Od(a){var b=a.getRootNode();C(b)&&Kd(b);return(a=A(a))&&a.assignedSlot||null}
|
||||
var Pd={addEventListener:xd.bind(window),removeEventListener:zd.bind(window)},Qd={addEventListener:xd,removeEventListener:zd,appendChild:function(a){return Uc(this,a)},insertBefore:function(a,b){return Uc(this,a,b)},removeChild:function(a){return Vc(this,a)},replaceChild:function(a,b){Uc(this,a,b);Vc(this,b);return a},cloneNode:function(a){if("template"==this.localName)var b=D.cloneNode.call(this,a);else if(b=D.cloneNode.call(this,!1),a){a=this.childNodes;for(var c=0,d;c<a.length;c++)d=a[c].cloneNode(!0),
|
||||
b.appendChild(d)}return b},getRootNode:function(){return gd(this)},contains:function(a){return Gb(this,a)},dispatchEvent:function(a){Kb();return D.dispatchEvent.call(this,a)}};
|
||||
Object.defineProperties(Qd,{isConnected:{get:function(){if(Ac&&Ac.call(this))return!0;if(this.nodeType==Node.DOCUMENT_FRAGMENT_NODE)return!1;var a=this.ownerDocument;if(Fb){if(D.contains.call(a,this))return!0}else if(a.documentElement&&D.contains.call(a.documentElement,this))return!0;for(a=this;a&&!(a instanceof Document);)a=a.parentNode||(C(a)?a.host:void 0);return!!(a&&a instanceof Document)},configurable:!0}});
|
||||
var Rd={get assignedSlot(){return Od(this)}},Sd={querySelector:function(a){return hd(this,function(b){return xb.call(b,a)},function(a){return!!a})[0]||null},querySelectorAll:function(a,b){if(b){b=Array.prototype.slice.call(D.querySelectorAll(this,a));var c=this.getRootNode();return b.filter(function(a){return a.getRootNode()==c})}return hd(this,function(b){return xb.call(b,a)})}},Td={assignedNodes:function(a){if("slot"===this.localName){var b=this.getRootNode();C(b)&&Kd(b);return(b=A(this))?(a&&a.flatten?
|
||||
b.L:b.assignedNodes)||[]:[]}}},Ud=zb({setAttribute:function(a,b){kd(this,a,b)},removeAttribute:function(a){D.removeAttribute.call(this,a);dd(this,a)},attachShadow:function(a){if(!this)throw"Must provide a host.";if(!a)throw"Not enough arguments.";return new Nc(Id,this,a)},get slot(){return this.getAttribute("slot")},set slot(a){kd(this,"slot",a)},get assignedSlot(){return Od(this)}},Sd,Td);Object.defineProperties(Ud,Jc);
|
||||
var Vd=zb({importNode:function(a,b){return ld(a,b)},getElementById:function(a){return hd(this,function(b){return b.id==a},function(a){return!!a})[0]||null}},Sd);Object.defineProperties(Vd,{_activeElement:Kc.activeElement});
|
||||
var Wd=HTMLElement.prototype.blur,Xd=zb({blur:function(){var a=A(this);(a=(a=a&&a.root)&&a.activeElement)?a.blur():Wd.call(this)}}),Yd={addEventListener:function(a,b,c){"object"!==typeof c&&(c={capture:!!c});c.la=this;this.host.addEventListener(a,b,c)},removeEventListener:function(a,b,c){"object"!==typeof c&&(c={capture:!!c});c.la=this;this.host.removeEventListener(a,b,c)},getElementById:function(a){return hd(this,function(b){return b.id==a},function(a){return!!a})[0]||null}};
|
||||
function Zd(a,b){for(var c=Object.getOwnPropertyNames(b),d=0;d<c.length;d++){var e=c[d],f=Object.getOwnPropertyDescriptor(b,e);f.value?a[e]=f.value:Object.defineProperty(a,e,f)}};if(B.Ba){var ShadyDOM={inUse:B.Ba,patch:function(a){Pc(a);Oc(a);return a},isShadyRoot:C,enqueue:Jb,flush:Kb,settings:B,filterMutations:Qb,observeChildren:Ob,unobserveChildren:Pb,nativeMethods:D,nativeTree:M};window.ShadyDOM=ShadyDOM;window.Event=Bd;window.CustomEvent=Cd;window.MouseEvent=Dd;Ad();var $d=window.customElements&&window.customElements.nativeHTMLElement||HTMLElement;Zd(Nc.prototype,Yd);Zd(window.Node.prototype,Qd);Zd(window.Window.prototype,Pd);Zd(window.Text.prototype,Rd);Zd(window.DocumentFragment.prototype,
|
||||
Sd);Zd(window.Element.prototype,Ud);Zd(window.Document.prototype,Vd);window.HTMLSlotElement&&Zd(window.HTMLSlotElement.prototype,Td);Zd($d.prototype,Xd);B.I&&(Lc(window.Node.prototype),Lc(window.Text.prototype),Lc(window.DocumentFragment.prototype),Lc(window.Element.prototype),Lc($d.prototype),Lc(window.Document.prototype),window.HTMLSlotElement&&Lc(window.HTMLSlotElement.prototype));Mc();window.ShadowRoot=Nc};var ae=new Set("annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(" "));function be(a){var b=ae.has(a);a=/^[a-z][.0-9_a-z]*-[\-.0-9_a-z]*$/.test(a);return!b&&a}function O(a){var b=a.isConnected;if(void 0!==b)return b;for(;a&&!(a.__CE_isImportDocument||a instanceof Document);)a=a.parentNode||(window.ShadowRoot&&a instanceof ShadowRoot?a.host:void 0);return!(!a||!(a.__CE_isImportDocument||a instanceof Document))}
|
||||
function ce(a,b){for(;b&&b!==a&&!b.nextSibling;)b=b.parentNode;return b&&b!==a?b.nextSibling:null}
|
||||
function de(a,b,c){c=void 0===c?new Set:c;for(var d=a;d;){if(d.nodeType===Node.ELEMENT_NODE){var e=d;b(e);var f=e.localName;if("link"===f&&"import"===e.getAttribute("rel")){d=e.import;if(d instanceof Node&&!c.has(d))for(c.add(d),d=d.firstChild;d;d=d.nextSibling)de(d,b,c);d=ce(a,e);continue}else if("template"===f){d=ce(a,e);continue}if(e=e.__CE_shadowRoot)for(e=e.firstChild;e;e=e.nextSibling)de(e,b,c)}d=d.firstChild?d.firstChild:ce(a,d)}}function P(a,b,c){a[b]=c};function ee(){this.a=new Map;this.M=new Map;this.F=[];this.c=!1}function fe(a,b,c){a.a.set(b,c);a.M.set(c.constructor,c)}function ge(a,b){a.c=!0;a.F.push(b)}function he(a,b){a.c&&de(b,function(b){return a.b(b)})}ee.prototype.b=function(a){if(this.c&&!a.__CE_patched){a.__CE_patched=!0;for(var b=0;b<this.F.length;b++)this.F[b](a)}};function Q(a,b){var c=[];de(b,function(a){return c.push(a)});for(b=0;b<c.length;b++){var d=c[b];1===d.__CE_state?a.connectedCallback(d):ie(a,d)}}
|
||||
function R(a,b){var c=[];de(b,function(a){return c.push(a)});for(b=0;b<c.length;b++){var d=c[b];1===d.__CE_state&&a.disconnectedCallback(d)}}
|
||||
function je(a,b,c){c=void 0===c?{}:c;var d=c.bb||new Set,e=c.ga||function(b){return ie(a,b)},f=[];de(b,function(b){if("link"===b.localName&&"import"===b.getAttribute("rel")){var c=b.import;c instanceof Node&&(c.__CE_isImportDocument=!0,c.__CE_hasRegistry=!0);c&&"complete"===c.readyState?c.__CE_documentLoadHandled=!0:b.addEventListener("load",function(){var c=b.import;if(!c.__CE_documentLoadHandled){c.__CE_documentLoadHandled=!0;var f=new Set(d);f.delete(c);je(a,c,{bb:f,ga:e})}})}else f.push(b)},d);
|
||||
if(a.c)for(b=0;b<f.length;b++)a.b(f[b]);for(b=0;b<f.length;b++)e(f[b])}
|
||||
function ie(a,b){if(void 0===b.__CE_state){var c=b.ownerDocument;if(c.defaultView||c.__CE_isImportDocument&&c.__CE_hasRegistry)if(c=a.a.get(b.localName)){c.constructionStack.push(b);var d=c.constructor;try{try{if(new d!==b)throw Error("The custom element constructor did not produce the element being upgraded.");}finally{c.constructionStack.pop()}}catch(g){throw b.__CE_state=2,g;}b.__CE_state=1;b.__CE_definition=c;if(c.attributeChangedCallback)for(c=c.observedAttributes,d=0;d<c.length;d++){var e=c[d],
|
||||
f=b.getAttribute(e);null!==f&&a.attributeChangedCallback(b,e,null,f,null)}O(b)&&a.connectedCallback(b)}}}ee.prototype.connectedCallback=function(a){var b=a.__CE_definition;b.connectedCallback&&b.connectedCallback.call(a)};ee.prototype.disconnectedCallback=function(a){var b=a.__CE_definition;b.disconnectedCallback&&b.disconnectedCallback.call(a)};
|
||||
ee.prototype.attributeChangedCallback=function(a,b,c,d,e){var f=a.__CE_definition;f.attributeChangedCallback&&-1<f.observedAttributes.indexOf(b)&&f.attributeChangedCallback.call(a,b,c,d,e)};function ke(a){var b=document;this.A=a;this.a=b;this.P=void 0;je(this.A,this.a);"loading"===this.a.readyState&&(this.P=new MutationObserver(this.b.bind(this)),this.P.observe(this.a,{childList:!0,subtree:!0}))}function le(a){a.P&&a.P.disconnect()}ke.prototype.b=function(a){var b=this.a.readyState;"interactive"!==b&&"complete"!==b||le(this);for(b=0;b<a.length;b++)for(var c=a[b].addedNodes,d=0;d<c.length;d++)je(this.A,c[d])};function me(){var a=this;this.b=this.a=void 0;this.c=new Promise(function(b){a.b=b;a.a&&b(a.a)})}me.prototype.resolve=function(a){if(this.a)throw Error("Already resolved.");this.a=a;this.b&&this.b(a)};function S(a){this.ma=!1;this.A=a;this.ra=new Map;this.na=function(a){return a()};this.Y=!1;this.oa=[];this.Ma=new ke(a)}q=S.prototype;
|
||||
q.define=function(a,b){var c=this;if(!(b instanceof Function))throw new TypeError("Custom element constructors must be functions.");if(!be(a))throw new SyntaxError("The element name '"+a+"' is not valid.");if(this.A.a.get(a))throw Error("A custom element with name '"+a+"' has already been defined.");if(this.ma)throw Error("A custom element is already being defined.");this.ma=!0;try{var d=function(a){var b=e[a];if(void 0!==b&&!(b instanceof Function))throw Error("The '"+a+"' callback must be a function.");
|
||||
return b},e=b.prototype;if(!(e instanceof Object))throw new TypeError("The custom element constructor's prototype is not an object.");var f=d("connectedCallback");var g=d("disconnectedCallback");var h=d("adoptedCallback");var k=d("attributeChangedCallback");var m=b.observedAttributes||[]}catch(n){return}finally{this.ma=!1}b={localName:a,constructor:b,connectedCallback:f,disconnectedCallback:g,adoptedCallback:h,attributeChangedCallback:k,observedAttributes:m,constructionStack:[]};fe(this.A,a,b);this.oa.push(b);
|
||||
this.Y||(this.Y=!0,this.na(function(){return ne(c)}))};q.ga=function(a){je(this.A,a)};
|
||||
function ne(a){if(!1!==a.Y){a.Y=!1;for(var b=a.oa,c=[],d=new Map,e=0;e<b.length;e++)d.set(b[e].localName,[]);je(a.A,document,{ga:function(b){if(void 0===b.__CE_state){var e=b.localName,f=d.get(e);f?f.push(b):a.A.a.get(e)&&c.push(b)}}});for(e=0;e<c.length;e++)ie(a.A,c[e]);for(;0<b.length;){var f=b.shift();e=f.localName;f=d.get(f.localName);for(var g=0;g<f.length;g++)ie(a.A,f[g]);(e=a.ra.get(e))&&e.resolve(void 0)}}}q.get=function(a){if(a=this.A.a.get(a))return a.constructor};
|
||||
q.whenDefined=function(a){if(!be(a))return Promise.reject(new SyntaxError("'"+a+"' is not a valid custom element name."));var b=this.ra.get(a);if(b)return b.c;b=new me;this.ra.set(a,b);this.A.a.get(a)&&!this.oa.some(function(b){return b.localName===a})&&b.resolve(void 0);return b.c};q.Xa=function(a){le(this.Ma);var b=this.na;this.na=function(c){return a(function(){return b(c)})}};window.CustomElementRegistry=S;S.prototype.define=S.prototype.define;S.prototype.upgrade=S.prototype.ga;
|
||||
S.prototype.get=S.prototype.get;S.prototype.whenDefined=S.prototype.whenDefined;S.prototype.polyfillWrapFlushCallback=S.prototype.Xa;var oe=window.Document.prototype.createElement,pe=window.Document.prototype.createElementNS,qe=window.Document.prototype.importNode,re=window.Document.prototype.prepend,se=window.Document.prototype.append,te=window.DocumentFragment.prototype.prepend,ue=window.DocumentFragment.prototype.append,ve=window.Node.prototype.cloneNode,we=window.Node.prototype.appendChild,xe=window.Node.prototype.insertBefore,ye=window.Node.prototype.removeChild,ze=window.Node.prototype.replaceChild,Ae=Object.getOwnPropertyDescriptor(window.Node.prototype,
|
||||
"textContent"),Be=window.Element.prototype.attachShadow,Ce=Object.getOwnPropertyDescriptor(window.Element.prototype,"innerHTML"),De=window.Element.prototype.getAttribute,Ee=window.Element.prototype.setAttribute,Fe=window.Element.prototype.removeAttribute,Ge=window.Element.prototype.getAttributeNS,He=window.Element.prototype.setAttributeNS,Ie=window.Element.prototype.removeAttributeNS,Je=window.Element.prototype.insertAdjacentElement,Ke=window.Element.prototype.insertAdjacentHTML,Le=window.Element.prototype.prepend,
|
||||
Me=window.Element.prototype.append,Ne=window.Element.prototype.before,Oe=window.Element.prototype.after,Pe=window.Element.prototype.replaceWith,Qe=window.Element.prototype.remove,Re=window.HTMLElement,Se=Object.getOwnPropertyDescriptor(window.HTMLElement.prototype,"innerHTML"),Te=window.HTMLElement.prototype.insertAdjacentElement,Ue=window.HTMLElement.prototype.insertAdjacentHTML;var Ve=new function(){};function We(){var a=Xe;window.HTMLElement=function(){function b(){var b=this.constructor,d=a.M.get(b);if(!d)throw Error("The custom element being constructed was not registered with `customElements`.");var e=d.constructionStack;if(0===e.length)return e=oe.call(document,d.localName),Object.setPrototypeOf(e,b.prototype),e.__CE_state=1,e.__CE_definition=d,a.b(e),e;d=e.length-1;var f=e[d];if(f===Ve)throw Error("The HTMLElement constructor was either called reentrantly for this constructor or called multiple times.");
|
||||
e[d]=Ve;Object.setPrototypeOf(f,b.prototype);a.b(f);return f}b.prototype=Re.prototype;return b}()};function Ye(a,b,c){function d(b){return function(c){for(var d=[],e=0;e<arguments.length;++e)d[e-0]=arguments[e];e=[];for(var f=[],m=0;m<d.length;m++){var n=d[m];n instanceof Element&&O(n)&&f.push(n);if(n instanceof DocumentFragment)for(n=n.firstChild;n;n=n.nextSibling)e.push(n);else e.push(n)}b.apply(this,d);for(d=0;d<f.length;d++)R(a,f[d]);if(O(this))for(d=0;d<e.length;d++)f=e[d],f instanceof Element&&Q(a,f)}}void 0!==c.fa&&(b.prepend=d(c.fa));void 0!==c.append&&(b.append=d(c.append))};function Ze(){var a=Xe;P(Document.prototype,"createElement",function(b){if(this.__CE_hasRegistry){var c=a.a.get(b);if(c)return new c.constructor}b=oe.call(this,b);a.b(b);return b});P(Document.prototype,"importNode",function(b,c){b=qe.call(this,b,c);this.__CE_hasRegistry?je(a,b):he(a,b);return b});P(Document.prototype,"createElementNS",function(b,c){if(this.__CE_hasRegistry&&(null===b||"http://www.w3.org/1999/xhtml"===b)){var d=a.a.get(c);if(d)return new d.constructor}b=pe.call(this,b,c);a.b(b);return b});
|
||||
Ye(a,Document.prototype,{fa:re,append:se})};function $e(){var a=Xe;function b(b,d){Object.defineProperty(b,"textContent",{enumerable:d.enumerable,configurable:!0,get:d.get,set:function(b){if(this.nodeType===Node.TEXT_NODE)d.set.call(this,b);else{var c=void 0;if(this.firstChild){var e=this.childNodes,h=e.length;if(0<h&&O(this)){c=Array(h);for(var k=0;k<h;k++)c[k]=e[k]}}d.set.call(this,b);if(c)for(b=0;b<c.length;b++)R(a,c[b])}}})}P(Node.prototype,"insertBefore",function(b,d){if(b instanceof DocumentFragment){var c=Array.prototype.slice.apply(b.childNodes);
|
||||
b=xe.call(this,b,d);if(O(this))for(d=0;d<c.length;d++)Q(a,c[d]);return b}c=O(b);d=xe.call(this,b,d);c&&R(a,b);O(this)&&Q(a,b);return d});P(Node.prototype,"appendChild",function(b){if(b instanceof DocumentFragment){var c=Array.prototype.slice.apply(b.childNodes);b=we.call(this,b);if(O(this))for(var e=0;e<c.length;e++)Q(a,c[e]);return b}c=O(b);e=we.call(this,b);c&&R(a,b);O(this)&&Q(a,b);return e});P(Node.prototype,"cloneNode",function(b){b=ve.call(this,b);this.ownerDocument.__CE_hasRegistry?je(a,b):
|
||||
he(a,b);return b});P(Node.prototype,"removeChild",function(b){var c=O(b),e=ye.call(this,b);c&&R(a,b);return e});P(Node.prototype,"replaceChild",function(b,d){if(b instanceof DocumentFragment){var c=Array.prototype.slice.apply(b.childNodes);b=ze.call(this,b,d);if(O(this))for(R(a,d),d=0;d<c.length;d++)Q(a,c[d]);return b}c=O(b);var f=ze.call(this,b,d),g=O(this);g&&R(a,d);c&&R(a,b);g&&Q(a,b);return f});Ae&&Ae.get?b(Node.prototype,Ae):ge(a,function(a){b(a,{enumerable:!0,configurable:!0,get:function(){for(var a=
|
||||
[],b=0;b<this.childNodes.length;b++)a.push(this.childNodes[b].textContent);return a.join("")},set:function(a){for(;this.firstChild;)ye.call(this,this.firstChild);we.call(this,document.createTextNode(a))}})})};function af(a){var b=Element.prototype;function c(b){return function(c){for(var d=[],e=0;e<arguments.length;++e)d[e-0]=arguments[e];e=[];for(var h=[],k=0;k<d.length;k++){var m=d[k];m instanceof Element&&O(m)&&h.push(m);if(m instanceof DocumentFragment)for(m=m.firstChild;m;m=m.nextSibling)e.push(m);else e.push(m)}b.apply(this,d);for(d=0;d<h.length;d++)R(a,h[d]);if(O(this))for(d=0;d<e.length;d++)h=e[d],h instanceof Element&&Q(a,h)}}void 0!==Ne&&(b.before=c(Ne));void 0!==Ne&&(b.after=c(Oe));void 0!==
|
||||
Pe&&P(b,"replaceWith",function(b){for(var c=[],d=0;d<arguments.length;++d)c[d-0]=arguments[d];d=[];for(var g=[],h=0;h<c.length;h++){var k=c[h];k instanceof Element&&O(k)&&g.push(k);if(k instanceof DocumentFragment)for(k=k.firstChild;k;k=k.nextSibling)d.push(k);else d.push(k)}h=O(this);Pe.apply(this,c);for(c=0;c<g.length;c++)R(a,g[c]);if(h)for(R(a,this),c=0;c<d.length;c++)g=d[c],g instanceof Element&&Q(a,g)});void 0!==Qe&&P(b,"remove",function(){var b=O(this);Qe.call(this);b&&R(a,this)})};function bf(){var a=Xe;function b(b,c){Object.defineProperty(b,"innerHTML",{enumerable:c.enumerable,configurable:!0,get:c.get,set:function(b){var d=this,e=void 0;O(this)&&(e=[],de(this,function(a){a!==d&&e.push(a)}));c.set.call(this,b);if(e)for(var f=0;f<e.length;f++){var g=e[f];1===g.__CE_state&&a.disconnectedCallback(g)}this.ownerDocument.__CE_hasRegistry?je(a,this):he(a,this);return b}})}function c(b,c){P(b,"insertAdjacentElement",function(b,d){var e=O(d);b=c.call(this,b,d);e&&R(a,d);O(b)&&Q(a,
|
||||
d);return b})}function d(b,c){function d(b,c){for(var d=[];b!==c;b=b.nextSibling)d.push(b);for(c=0;c<d.length;c++)je(a,d[c])}P(b,"insertAdjacentHTML",function(a,b){a=a.toLowerCase();if("beforebegin"===a){var e=this.previousSibling;c.call(this,a,b);d(e||this.parentNode.firstChild,this)}else if("afterbegin"===a)e=this.firstChild,c.call(this,a,b),d(this.firstChild,e);else if("beforeend"===a)e=this.lastChild,c.call(this,a,b),d(e||this.firstChild,null);else if("afterend"===a)e=this.nextSibling,c.call(this,
|
||||
a,b),d(this.nextSibling,e);else throw new SyntaxError("The value provided ("+String(a)+") is not one of 'beforebegin', 'afterbegin', 'beforeend', or 'afterend'.");})}Be&&P(Element.prototype,"attachShadow",function(a){return this.__CE_shadowRoot=a=Be.call(this,a)});Ce&&Ce.get?b(Element.prototype,Ce):Se&&Se.get?b(HTMLElement.prototype,Se):ge(a,function(a){b(a,{enumerable:!0,configurable:!0,get:function(){return ve.call(this,!0).innerHTML},set:function(a){var b="template"===this.localName,c=b?this.content:
|
||||
this,d=oe.call(document,this.localName);for(d.innerHTML=a;0<c.childNodes.length;)ye.call(c,c.childNodes[0]);for(a=b?d.content:d;0<a.childNodes.length;)we.call(c,a.childNodes[0])}})});P(Element.prototype,"setAttribute",function(b,c){if(1!==this.__CE_state)return Ee.call(this,b,c);var d=De.call(this,b);Ee.call(this,b,c);c=De.call(this,b);a.attributeChangedCallback(this,b,d,c,null)});P(Element.prototype,"setAttributeNS",function(b,c,d){if(1!==this.__CE_state)return He.call(this,b,c,d);var e=Ge.call(this,
|
||||
b,c);He.call(this,b,c,d);d=Ge.call(this,b,c);a.attributeChangedCallback(this,c,e,d,b)});P(Element.prototype,"removeAttribute",function(b){if(1!==this.__CE_state)return Fe.call(this,b);var c=De.call(this,b);Fe.call(this,b);null!==c&&a.attributeChangedCallback(this,b,c,null,null)});P(Element.prototype,"removeAttributeNS",function(b,c){if(1!==this.__CE_state)return Ie.call(this,b,c);var d=Ge.call(this,b,c);Ie.call(this,b,c);var e=Ge.call(this,b,c);d!==e&&a.attributeChangedCallback(this,c,d,e,b)});Te?
|
||||
c(HTMLElement.prototype,Te):Je?c(Element.prototype,Je):console.warn("Custom Elements: `Element#insertAdjacentElement` was not patched.");Ue?d(HTMLElement.prototype,Ue):Ke?d(Element.prototype,Ke):console.warn("Custom Elements: `Element#insertAdjacentHTML` was not patched.");Ye(a,Element.prototype,{fa:Le,append:Me});af(a)};var cf=window.customElements;if(!cf||cf.forcePolyfill||"function"!=typeof cf.define||"function"!=typeof cf.get){var Xe=new ee;We();Ze();Ye(Xe,DocumentFragment.prototype,{fa:te,append:ue});$e();bf();document.__CE_hasRegistry=!0;var customElements=new S(Xe);Object.defineProperty(window,"customElements",{configurable:!0,enumerable:!0,value:customElements})};function df(){this.end=this.start=0;this.rules=this.parent=this.previous=null;this.cssText=this.parsedCssText="";this.atRule=!1;this.type=0;this.parsedSelector=this.selector=this.keyframesName=""}
|
||||
function ef(a){a=a.replace(ff,"").replace(gf,"");var b=hf,c=a,d=new df;d.start=0;d.end=c.length;for(var e=d,f=0,g=c.length;f<g;f++)if("{"===c[f]){e.rules||(e.rules=[]);var h=e,k=h.rules[h.rules.length-1]||null;e=new df;e.start=f+1;e.parent=h;e.previous=k;h.rules.push(e)}else"}"===c[f]&&(e.end=f+1,e=e.parent||d);return b(d,a)}
|
||||
function hf(a,b){var c=b.substring(a.start,a.end-1);a.parsedCssText=a.cssText=c.trim();a.parent&&(c=b.substring(a.previous?a.previous.end:a.parent.start,a.start-1),c=jf(c),c=c.replace(kf," "),c=c.substring(c.lastIndexOf(";")+1),c=a.parsedSelector=a.selector=c.trim(),a.atRule=0===c.indexOf("@"),a.atRule?0===c.indexOf("@media")?a.type=lf:c.match(rf)&&(a.type=sf,a.keyframesName=a.selector.split(kf).pop()):a.type=0===c.indexOf("--")?tf:uf);if(c=a.rules)for(var d=0,e=c.length,f;d<e&&(f=c[d]);d++)hf(f,
|
||||
b);return a}function jf(a){return a.replace(/\\([0-9a-f]{1,6})\s/gi,function(a,c){a=c;for(c=6-a.length;c--;)a="0"+a;return"\\"+a})}
|
||||
function vf(a,b,c){c=void 0===c?"":c;var d="";if(a.cssText||a.rules){var e=a.rules,f;if(f=e)f=e[0],f=!(f&&f.selector&&0===f.selector.indexOf("--"));if(f){f=0;for(var g=e.length,h;f<g&&(h=e[f]);f++)d=vf(h,b,d)}else b?b=a.cssText:(b=a.cssText,b=b.replace(wf,"").replace(xf,""),b=b.replace(yf,"").replace(zf,"")),(d=b.trim())&&(d=" "+d+"\n")}d&&(a.selector&&(c+=a.selector+" {\n"),c+=d,a.selector&&(c+="}\n\n"));return c}
|
||||
var uf=1,sf=7,lf=4,tf=1E3,ff=/\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,gf=/@import[^;]*;/gim,wf=/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?(?:[;\n]|$)/gim,xf=/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?{[^}]*?}(?:[;\n]|$)?/gim,yf=/@apply\s*\(?[^);]*\)?\s*(?:[;\n]|$)?/gim,zf=/[^;:]*?:[^;]*?var\([^;]*\)(?:[;\n]|$)?/gim,rf=/^@[^\s]*keyframes/,kf=/\s+/g;var T=!(window.ShadyDOM&&window.ShadyDOM.inUse),Af;function Bf(a){Af=a&&a.shimcssproperties?!1:T||!(navigator.userAgent.match(/AppleWebKit\/601|Edge\/15/)||!window.CSS||!CSS.supports||!CSS.supports("box-shadow","0 0 0 var(--foo)"))}window.ShadyCSS&&void 0!==window.ShadyCSS.nativeCss?Af=window.ShadyCSS.nativeCss:window.ShadyCSS?(Bf(window.ShadyCSS),window.ShadyCSS=void 0):Bf(window.WebComponents&&window.WebComponents.flags);var V=Af;var Cf=/(?:^|[;\s{]\s*)(--[\w-]*?)\s*:\s*(?:((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};{])+)|\{([^}]*)\}(?:(?=[;\s}])|$))/gi,Df=/(?:^|\W+)@apply\s*\(?([^);\n]*)\)?/gi,Ef=/(--[\w-]+)\s*([:,;)]|$)/gi,Ff=/(animation\s*:)|(animation-name\s*:)/,Gf=/@media\s(.*)/,Hf=/\{[^}]*\}/g;var If=new Set;function Jf(a,b){if(!a)return"";"string"===typeof a&&(a=ef(a));b&&Kf(a,b);return vf(a,V)}function Lf(a){!a.__cssRules&&a.textContent&&(a.__cssRules=ef(a.textContent));return a.__cssRules||null}function Mf(a){return!!a.parent&&a.parent.type===sf}function Kf(a,b,c,d){if(a){var e=!1,f=a.type;if(d&&f===lf){var g=a.selector.match(Gf);g&&(window.matchMedia(g[1]).matches||(e=!0))}f===uf?b(a):c&&f===sf?c(a):f===tf&&(e=!0);if((a=a.rules)&&!e){e=0;f=a.length;for(var h;e<f&&(h=a[e]);e++)Kf(h,b,c,d)}}}
|
||||
function Nf(a,b,c,d){var e=document.createElement("style");b&&e.setAttribute("scope",b);e.textContent=a;Of(e,c,d);return e}var Pf=null;function Of(a,b,c){b=b||document.head;b.insertBefore(a,c&&c.nextSibling||b.firstChild);Pf?a.compareDocumentPosition(Pf)===Node.DOCUMENT_POSITION_PRECEDING&&(Pf=a):Pf=a}
|
||||
function Qf(a,b){var c=a.indexOf("var(");if(-1===c)return b(a,"","","");a:{var d=0;var e=c+3;for(var f=a.length;e<f;e++)if("("===a[e])d++;else if(")"===a[e]&&0===--d)break a;e=-1}d=a.substring(c+4,e);c=a.substring(0,c);a=Qf(a.substring(e+1),b);e=d.indexOf(",");return-1===e?b(c,d.trim(),"",a):b(c,d.substring(0,e).trim(),d.substring(e+1).trim(),a)}function Rf(a,b){T?a.setAttribute("class",b):window.ShadyDOM.nativeMethods.setAttribute.call(a,"class",b)}
|
||||
function Sf(a){var b=a.localName,c="";b?-1<b.indexOf("-")||(c=b,b=a.getAttribute&&a.getAttribute("is")||""):(b=a.is,c=a.extends);return{is:b,X:c}};function Tf(){}function Uf(a,b,c){var d=Vf;a.__styleScoped?a.__styleScoped=null:Wf(d,a,b||"",c)}function Wf(a,b,c,d){b.nodeType===Node.ELEMENT_NODE&&Xf(b,c,d);if(b="template"===b.localName?(b.content||b.jb).childNodes:b.children||b.childNodes)for(var e=0;e<b.length;e++)Wf(a,b[e],c,d)}
|
||||
function Xf(a,b,c){if(b)if(a.classList)c?(a.classList.remove("style-scope"),a.classList.remove(b)):(a.classList.add("style-scope"),a.classList.add(b));else if(a.getAttribute){var d=a.getAttribute(Yf);c?d&&(b=d.replace("style-scope","").replace(b,""),Rf(a,b)):Rf(a,(d?d+" ":"")+"style-scope "+b)}}function Zf(a,b,c){var d=Vf,e=a.__cssBuild;T||"shady"===e?b=Jf(b,c):(a=Sf(a),b=$f(d,b,a.is,a.X,c)+"\n\n");return b.trim()}
|
||||
function $f(a,b,c,d,e){var f=ag(c,d);c=c?bg+c:"";return Jf(b,function(b){b.c||(b.selector=b.G=cg(a,b,a.b,c,f),b.c=!0);e&&e(b,c,f)})}function ag(a,b){return b?"[is="+a+"]":a}function cg(a,b,c,d,e){var f=b.selector.split(dg);if(!Mf(b)){b=0;for(var g=f.length,h;b<g&&(h=f[b]);b++)f[b]=c.call(a,h,d,e)}return f.join(dg)}function eg(a){return a.replace(fg,function(a,c,d){-1<d.indexOf("+")?d=d.replace(/\+/g,"___"):-1<d.indexOf("___")&&(d=d.replace(/___/g,"+"));return":"+c+"("+d+")"})}
|
||||
Tf.prototype.b=function(a,b,c){var d=!1;a=a.trim();var e=fg.test(a);e&&(a=a.replace(fg,function(a,b,c){return":"+b+"("+c.replace(/\s/g,"")+")"}),a=eg(a));a=a.replace(gg,hg+" $1");a=a.replace(ig,function(a,e,h){d||(a=jg(h,e,b,c),d=d||a.stop,e=a.Sa,h=a.value);return e+h});e&&(a=eg(a));return a};
|
||||
function jg(a,b,c,d){var e=a.indexOf(kg);0<=a.indexOf(hg)?a=lg(a,d):0!==e&&(a=c?mg(a,c):a);c=!1;0<=e&&(b="",c=!0);if(c){var f=!0;c&&(a=a.replace(ng,function(a,b){return" > "+b}))}a=a.replace(og,function(a,b,c){return'[dir="'+c+'"] '+b+", "+b+'[dir="'+c+'"]'});return{value:a,Sa:b,stop:f}}function mg(a,b){a=a.split(pg);a[0]+=b;return a.join(pg)}
|
||||
function lg(a,b){var c=a.match(qg);return(c=c&&c[2].trim()||"")?c[0].match(rg)?a.replace(qg,function(a,c,f){return b+f}):c.split(rg)[0]===b?c:sg:a.replace(hg,b)}function tg(a){a.selector===ug&&(a.selector="html")}Tf.prototype.c=function(a){return a.match(kg)?this.b(a,vg):mg(a.trim(),vg)};aa.Object.defineProperties(Tf.prototype,{a:{configurable:!0,enumerable:!0,get:function(){return"style-scope"}}});
|
||||
var fg=/:(nth[-\w]+)\(([^)]+)\)/,vg=":not(.style-scope)",dg=",",ig=/(^|[\s>+~]+)((?:\[.+?\]|[^\s>+~=[])+)/g,rg=/[[.:#*]/,hg=":host",ug=":root",kg="::slotted",gg=new RegExp("^("+kg+")"),qg=/(:host)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))/,ng=/(?:::slotted)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))/,og=/(.*):dir\((?:(ltr|rtl))\)/,bg=".",pg=":",Yf="class",sg="should_not_match",Vf=new Tf;function wg(a,b,c,d){this.K=a||null;this.b=b||null;this.sa=c||[];this.T=null;this.X=d||"";this.a=this.H=this.O=null}function xg(a){return a?a.__styleInfo:null}function yg(a,b){return a.__styleInfo=b}wg.prototype.c=function(){return this.K};wg.prototype._getStyleRules=wg.prototype.c;function zg(a){var b=this.matches||this.matchesSelector||this.mozMatchesSelector||this.msMatchesSelector||this.oMatchesSelector||this.webkitMatchesSelector;return b&&b.call(this,a)}var Ag=navigator.userAgent.match("Trident");function Bg(){}function Cg(a){var b={},c=[],d=0;Kf(a,function(a){Dg(a);a.index=d++;a=a.B.cssText;for(var c;c=Ef.exec(a);){var e=c[1];":"!==c[2]&&(b[e]=!0)}},function(a){c.push(a)});a.b=c;a=[];for(var e in b)a.push(e);return a}
|
||||
function Dg(a){if(!a.B){var b={},c={};Eg(a,c)&&(b.J=c,a.rules=null);b.cssText=a.parsedCssText.replace(Hf,"").replace(Cf,"");a.B=b}}function Eg(a,b){var c=a.B;if(c){if(c.J)return Object.assign(b,c.J),!0}else{c=a.parsedCssText;for(var d;a=Cf.exec(c);){d=(a[2]||a[3]).trim();if("inherit"!==d||"unset"!==d)b[a[1].trim()]=d;d=!0}return d}}
|
||||
function Fg(a,b,c){b&&(b=0<=b.indexOf(";")?Gg(a,b,c):Qf(b,function(b,e,f,g){if(!e)return b+g;(e=Fg(a,c[e],c))&&"initial"!==e?"apply-shim-inherit"===e&&(e="inherit"):e=Fg(a,c[f]||f,c)||f;return b+(e||"")+g}));return b&&b.trim()||""}
|
||||
function Gg(a,b,c){b=b.split(";");for(var d=0,e,f;d<b.length;d++)if(e=b[d]){Df.lastIndex=0;if(f=Df.exec(e))e=Fg(a,c[f[1]],c);else if(f=e.indexOf(":"),-1!==f){var g=e.substring(f);g=g.trim();g=Fg(a,g,c)||g;e=e.substring(0,f)+g}b[d]=e&&e.lastIndexOf(";")===e.length-1?e.slice(0,-1):e||""}return b.join(";")}
|
||||
function Hg(a,b){var c={},d=[];Kf(a,function(a){a.B||Dg(a);var e=a.G||a.parsedSelector;b&&a.B.J&&e&&zg.call(b,e)&&(Eg(a,c),a=a.index,e=parseInt(a/32,10),d[e]=(d[e]||0)|1<<a%32)},null,!0);return{J:c,key:d}}
|
||||
function Ig(a,b,c,d){b.B||Dg(b);if(b.B.J){var e=Sf(a);a=e.is;e=e.X;e=a?ag(a,e):"html";var f=b.parsedSelector,g=":host > *"===f||"html"===f,h=0===f.indexOf(":host")&&!g;"shady"===c&&(g=f===e+" > *."+e||-1!==f.indexOf("html"),h=!g&&0===f.indexOf(e));"shadow"===c&&(g=":host > *"===f||"html"===f,h=h&&!g);if(g||h)c=e,h&&(b.G||(b.G=cg(Vf,b,Vf.b,a?bg+a:"",e)),c=b.G||e),d({Za:c,Wa:h,wb:g})}}
|
||||
function Jg(a,b){var c={},d={},e=b&&b.__cssBuild;Kf(b,function(b){Ig(a,b,e,function(e){zg.call(a.kb||a,e.Za)&&(e.Wa?Eg(b,c):Eg(b,d))})},null,!0);return{Ya:d,Va:c}}
|
||||
function Kg(a,b,c,d){var e=Sf(b),f=ag(e.is,e.X),g=new RegExp("(?:^|[^.#[:])"+(b.extends?"\\"+f.slice(0,-1)+"\\]":f)+"($|[.:[\\s>+~])");e=xg(b).K;var h=Lg(e,d);return Zf(b,e,function(b){var e="";b.B||Dg(b);b.B.cssText&&(e=Gg(a,b.B.cssText,c));b.cssText=e;if(!T&&!Mf(b)&&b.cssText){var k=e=b.cssText;null==b.za&&(b.za=Ff.test(e));if(b.za)if(null==b.ea){b.ea=[];for(var r in h)k=h[r],k=k(e),e!==k&&(e=k,b.ea.push(r))}else{for(r=0;r<b.ea.length;++r)k=h[b.ea[r]],e=k(e);k=e}b.cssText=k;b.G=b.G||b.selector;
|
||||
e="."+d;r=b.G.split(",");k=0;for(var G=r.length,x;k<G&&(x=r[k]);k++)r[k]=x.match(g)?x.replace(f,e):e+" "+x;b.selector=r.join(",")}})}function Lg(a,b){a=a.b;var c={};if(!T&&a)for(var d=0,e=a[d];d<a.length;e=a[++d]){var f=e,g=b;f.F=new RegExp("\\b"+f.keyframesName+"(?!\\B|-)","g");f.a=f.keyframesName+"-"+g;f.G=f.G||f.selector;f.selector=f.G.replace(f.keyframesName,f.a);c[e.keyframesName]=Mg(e)}return c}function Mg(a){return function(b){return b.replace(a.F,a.a)}}
|
||||
function Ng(a,b){var c=Og,d=Lf(a);a.textContent=Jf(d,function(a){var d=a.cssText=a.parsedCssText;a.B&&a.B.cssText&&(d=d.replace(wf,"").replace(xf,""),a.cssText=Gg(c,d,b))})}aa.Object.defineProperties(Bg.prototype,{a:{configurable:!0,enumerable:!0,get:function(){return"x-scope"}}});var Og=new Bg;var Pg={},Qg=window.customElements;if(Qg&&!T){var Rg=Qg.define;Qg.define=function(a,b,c){var d=document.createComment(" Shady DOM styles for "+a+" "),e=document.head;e.insertBefore(d,(Pf?Pf.nextSibling:null)||e.firstChild);Pf=d;Pg[a]=d;Rg.call(Qg,a,b,c)}};function Sg(){this.cache={}}Sg.prototype.store=function(a,b,c,d){var e=this.cache[a]||[];e.push({J:b,styleElement:c,H:d});100<e.length&&e.shift();this.cache[a]=e};Sg.prototype.fetch=function(a,b,c){if(a=this.cache[a])for(var d=a.length-1;0<=d;d--){var e=a[d],f;a:{for(f=0;f<c.length;f++){var g=c[f];if(e.J[g]!==b[g]){f=!1;break a}}f=!0}if(f)return e}};function Tg(){}
|
||||
function Ug(a){for(var b=0;b<a.length;b++){var c=a[b];if(c.target!==document.documentElement&&c.target!==document.head)for(var d=0;d<c.addedNodes.length;d++){var e=c.addedNodes[d];if(e.nodeType===Node.ELEMENT_NODE){var f=e.getRootNode();var g=e;var h=[];g.classList?h=Array.from(g.classList):g instanceof window.SVGElement&&g.hasAttribute("class")&&(h=g.getAttribute("class").split(/\s+/));g=h;h=g.indexOf(Vf.a);if((g=-1<h?g[h+1]:"")&&f===e.ownerDocument)Uf(e,g,!0);else if(f.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&
|
||||
(f=f.host))if(f=Sf(f).is,g===f)for(e=window.ShadyDOM.nativeMethods.querySelectorAll.call(e,":not(."+Vf.a+")"),f=0;f<e.length;f++)Xf(e[f],g);else g&&Uf(e,g,!0),Uf(e,f)}}}}
|
||||
if(!T){var Vg=new MutationObserver(Ug),Wg=function(a){Vg.observe(a,{childList:!0,subtree:!0})};if(window.customElements&&!window.customElements.polyfillWrapFlushCallback)Wg(document);else{var Xg=function(){Wg(document.body)};window.HTMLImports?window.HTMLImports.whenReady(Xg):requestAnimationFrame(function(){if("loading"===document.readyState){var a=function(){Xg();document.removeEventListener("readystatechange",a)};document.addEventListener("readystatechange",a)}else Xg()})}Tg=function(){Ug(Vg.takeRecords())}}
|
||||
var Yg=Tg;var Zg={};var $g=Promise.resolve();function ah(a){if(a=Zg[a])a._applyShimCurrentVersion=a._applyShimCurrentVersion||0,a._applyShimValidatingVersion=a._applyShimValidatingVersion||0,a._applyShimNextVersion=(a._applyShimNextVersion||0)+1}function bh(a){return a._applyShimCurrentVersion===a._applyShimNextVersion}function ch(a){a._applyShimValidatingVersion=a._applyShimNextVersion;a.b||(a.b=!0,$g.then(function(){a._applyShimCurrentVersion=a._applyShimNextVersion;a.b=!1}))};var dh=new Sg;function W(){this.Aa={};this.c=document.documentElement;var a=new df;a.rules=[];this.F=yg(this.c,new wg(a));this.M=!1;this.b=this.a=null}q=W.prototype;q.Ga=function(){Yg()};q.Ta=function(a){return Lf(a)};q.ab=function(a){return Jf(a)};
|
||||
q.prepareTemplate=function(a,b,c){if(!a.F){a.F=!0;a.name=b;a.extends=c;Zg[b]=a;var d=(d=a.content.querySelector("style"))?d.getAttribute("css-build")||"":"";var e=[];for(var f=a.content.querySelectorAll("style"),g=0;g<f.length;g++){var h=f[g];if(h.hasAttribute("shady-unscoped")){if(!T){var k=h.textContent;If.has(k)||(If.add(k),k=h.cloneNode(!0),document.head.appendChild(k));h.parentNode.removeChild(h)}}else e.push(h.textContent),h.parentNode.removeChild(h)}e=e.join("").trim();c={is:b,extends:c,hb:d};
|
||||
T||Uf(a.content,b);eh(this);f=Df.test(e)||Cf.test(e);Df.lastIndex=0;Cf.lastIndex=0;e=ef(e);f&&V&&this.a&&this.a.transformRules(e,b);a._styleAst=e;a.M=d;d=[];V||(d=Cg(a._styleAst));if(!d.length||V)e=T?a.content:null,b=Pg[b],f=Zf(c,a._styleAst),b=f.length?Nf(f,c.is,e,b):void 0,a.a=b;a.c=d}};
|
||||
function fh(a){!a.b&&window.ShadyCSS&&window.ShadyCSS.CustomStyleInterface&&(a.b=window.ShadyCSS.CustomStyleInterface,a.b.transformCallback=function(b){a.Ea(b)},a.b.validateCallback=function(){requestAnimationFrame(function(){(a.b.enqueued||a.M)&&a.flushCustomStyles()})})}function eh(a){!a.a&&window.ShadyCSS&&window.ShadyCSS.ApplyShim&&(a.a=window.ShadyCSS.ApplyShim,a.a.invalidCallback=ah);fh(a)}
|
||||
q.flushCustomStyles=function(){eh(this);if(this.b){var a=this.b.processStyles();if(this.b.enqueued){if(V)for(var b=0;b<a.length;b++){var c=this.b.getStyleForCustomStyle(a[b]);if(c&&V&&this.a){var d=Lf(c);eh(this);this.a.transformRules(d);c.textContent=Jf(d)}}else for(gh(this,this.c,this.F),b=0;b<a.length;b++)(c=this.b.getStyleForCustomStyle(a[b]))&&Ng(c,this.F.O);this.b.enqueued=!1;this.M&&!V&&this.styleDocument()}}};
|
||||
q.styleElement=function(a,b){var c=Sf(a).is,d=xg(a);if(!d){var e=Sf(a);d=e.is;e=e.X;var f=Pg[d];d=Zg[d];if(d){var g=d._styleAst;var h=d.c}d=yg(a,new wg(g,f,h,e))}a!==this.c&&(this.M=!0);b&&(d.T=d.T||{},Object.assign(d.T,b));if(V){if(d.T){b=d.T;for(var k in b)null===k?a.style.removeProperty(k):a.style.setProperty(k,b[k])}if(((k=Zg[c])||a===this.c)&&k&&k.a&&!bh(k)){if(bh(k)||k._applyShimValidatingVersion!==k._applyShimNextVersion)eh(this),this.a&&this.a.transformRules(k._styleAst,c),k.a.textContent=
|
||||
Zf(a,d.K),ch(k);T&&(c=a.shadowRoot)&&(c.querySelector("style").textContent=Zf(a,d.K));d.K=k._styleAst}}else if(gh(this,a,d),d.sa&&d.sa.length){c=d;k=Sf(a).is;d=(b=dh.fetch(k,c.O,c.sa))?b.styleElement:null;g=c.H;(h=b&&b.H)||(h=this.Aa[k]=(this.Aa[k]||0)+1,h=k+"-"+h);c.H=h;h=c.H;e=Og;e=d?d.textContent||"":Kg(e,a,c.O,h);f=xg(a);var m=f.a;m&&!T&&m!==d&&(m._useCount--,0>=m._useCount&&m.parentNode&&m.parentNode.removeChild(m));T?f.a?(f.a.textContent=e,d=f.a):e&&(d=Nf(e,h,a.shadowRoot,f.b)):d?d.parentNode||
|
||||
(Ag&&-1<e.indexOf("@media")&&(d.textContent=e),Of(d,null,f.b)):e&&(d=Nf(e,h,null,f.b));d&&(d._useCount=d._useCount||0,f.a!=d&&d._useCount++,f.a=d);h=d;T||(d=c.H,f=e=a.getAttribute("class")||"",g&&(f=e.replace(new RegExp("\\s*x-scope\\s*"+g+"\\s*","g")," ")),f+=(f?" ":"")+"x-scope "+d,e!==f&&Rf(a,f));b||dh.store(k,c.O,h,c.H)}};function hh(a,b){return(b=b.getRootNode().host)?xg(b)?b:hh(a,b):a.c}
|
||||
function gh(a,b,c){a=hh(a,b);var d=xg(a);a=Object.create(d.O||null);var e=Jg(b,c.K);b=Hg(d.K,b).J;Object.assign(a,e.Va,b,e.Ya);b=c.T;for(var f in b)if((e=b[f])||0===e)a[f]=e;f=Og;b=Object.getOwnPropertyNames(a);for(e=0;e<b.length;e++)d=b[e],a[d]=Fg(f,a[d],a);c.O=a}q.styleDocument=function(a){this.styleSubtree(this.c,a)};
|
||||
q.styleSubtree=function(a,b){var c=a.shadowRoot;(c||a===this.c)&&this.styleElement(a,b);if(b=c&&(c.children||c.childNodes))for(a=0;a<b.length;a++)this.styleSubtree(b[a]);else if(a=a.children||a.childNodes)for(b=0;b<a.length;b++)this.styleSubtree(a[b])};q.Ea=function(a){var b=this,c=Lf(a);Kf(c,function(a){if(T)tg(a);else{var c=Vf;a.selector=a.parsedSelector;tg(a);a.selector=a.G=cg(c,a,c.c,void 0,void 0)}V&&(eh(b),b.a&&b.a.transformRule(a))});V?a.textContent=Jf(c):this.F.K.rules.push(c)};
|
||||
q.getComputedStyleValue=function(a,b){var c;V||(c=(xg(a)||xg(hh(this,a))).O[b]);return(c=c||window.getComputedStyle(a).getPropertyValue(b))?c.trim():""};q.$a=function(a,b){var c=a.getRootNode();b=b?b.split(/\s/):[];c=c.host&&c.host.localName;if(!c){var d=a.getAttribute("class");if(d){d=d.split(/\s/);for(var e=0;e<d.length;e++)if(d[e]===Vf.a){c=d[e+1];break}}}c&&b.push(Vf.a,c);V||(c=xg(a))&&c.H&&b.push(Og.a,c.H);Rf(a,b.join(" "))};q.Qa=function(a){return xg(a)};W.prototype.flush=W.prototype.Ga;
|
||||
W.prototype.prepareTemplate=W.prototype.prepareTemplate;W.prototype.styleElement=W.prototype.styleElement;W.prototype.styleDocument=W.prototype.styleDocument;W.prototype.styleSubtree=W.prototype.styleSubtree;W.prototype.getComputedStyleValue=W.prototype.getComputedStyleValue;W.prototype.setElementClass=W.prototype.$a;W.prototype._styleInfoForNode=W.prototype.Qa;W.prototype.transformCustomStyleForDocument=W.prototype.Ea;W.prototype.getStyleAst=W.prototype.Ta;W.prototype.styleAstToString=W.prototype.ab;
|
||||
W.prototype.flushCustomStyles=W.prototype.flushCustomStyles;Object.defineProperties(W.prototype,{nativeShadow:{get:function(){return T}},nativeCss:{get:function(){return V}}});var X=new W,ih,jh;window.ShadyCSS&&(ih=window.ShadyCSS.ApplyShim,jh=window.ShadyCSS.CustomStyleInterface);
|
||||
window.ShadyCSS={ScopingShim:X,prepareTemplate:function(a,b,c){X.flushCustomStyles();X.prepareTemplate(a,b,c)},styleSubtree:function(a,b){X.flushCustomStyles();X.styleSubtree(a,b)},styleElement:function(a){X.flushCustomStyles();X.styleElement(a)},styleDocument:function(a){X.flushCustomStyles();X.styleDocument(a)},flushCustomStyles:function(){X.flushCustomStyles()},getComputedStyleValue:function(a,b){return X.getComputedStyleValue(a,b)},nativeCss:V,nativeShadow:T};ih&&(window.ShadyCSS.ApplyShim=ih);
|
||||
jh&&(window.ShadyCSS.CustomStyleInterface=jh);(function(a){function b(a){""==a&&(f.call(this),this.h=!0);return a.toLowerCase()}function c(a){var b=a.charCodeAt(0);return 32<b&&127>b&&-1==[34,35,60,62,63,96].indexOf(b)?a:encodeURIComponent(a)}function d(a){var b=a.charCodeAt(0);return 32<b&&127>b&&-1==[34,35,60,62,96].indexOf(b)?a:encodeURIComponent(a)}function e(a,e,g){function h(a){kb.push(a)}var k=e||"scheme start",v=0,p="",x=!1,U=!1,kb=[];a:for(;(void 0!=a[v-1]||0==v)&&!this.h;){var l=a[v];switch(k){case "scheme start":if(l&&r.test(l))p+=
|
||||
l.toLowerCase(),k="scheme";else if(e){h("Invalid scheme.");break a}else{p="";k="no scheme";continue}break;case "scheme":if(l&&G.test(l))p+=l.toLowerCase();else if(":"==l){this.g=p;p="";if(e)break a;void 0!==m[this.g]&&(this.D=!0);k="file"==this.g?"relative":this.D&&g&&g.g==this.g?"relative or authority":this.D?"authority first slash":"scheme data"}else if(e){void 0!=l&&h("Code point not allowed in scheme: "+l);break a}else{p="";v=0;k="no scheme";continue}break;case "scheme data":"?"==l?(this.u="?",
|
||||
k="query"):"#"==l?(this.C="#",k="fragment"):void 0!=l&&"\t"!=l&&"\n"!=l&&"\r"!=l&&(this.qa+=c(l));break;case "no scheme":if(g&&void 0!==m[g.g]){k="relative";continue}else h("Missing scheme."),f.call(this),this.h=!0;break;case "relative or authority":if("/"==l&&"/"==a[v+1])k="authority ignore slashes";else{h("Expected /, got: "+l);k="relative";continue}break;case "relative":this.D=!0;"file"!=this.g&&(this.g=g.g);if(void 0==l){this.i=g.i;this.s=g.s;this.j=g.j.slice();this.u=g.u;this.v=g.v;this.f=g.f;
|
||||
break a}else if("/"==l||"\\"==l)"\\"==l&&h("\\ is an invalid code point."),k="relative slash";else if("?"==l)this.i=g.i,this.s=g.s,this.j=g.j.slice(),this.u="?",this.v=g.v,this.f=g.f,k="query";else if("#"==l)this.i=g.i,this.s=g.s,this.j=g.j.slice(),this.u=g.u,this.C="#",this.v=g.v,this.f=g.f,k="fragment";else{k=a[v+1];var F=a[v+2];if("file"!=this.g||!r.test(l)||":"!=k&&"|"!=k||void 0!=F&&"/"!=F&&"\\"!=F&&"?"!=F&&"#"!=F)this.i=g.i,this.s=g.s,this.v=g.v,this.f=g.f,this.j=g.j.slice(),this.j.pop();k=
|
||||
"relative path";continue}break;case "relative slash":if("/"==l||"\\"==l)"\\"==l&&h("\\ is an invalid code point."),k="file"==this.g?"file host":"authority ignore slashes";else{"file"!=this.g&&(this.i=g.i,this.s=g.s,this.v=g.v,this.f=g.f);k="relative path";continue}break;case "authority first slash":if("/"==l)k="authority second slash";else{h("Expected '/', got: "+l);k="authority ignore slashes";continue}break;case "authority second slash":k="authority ignore slashes";if("/"!=l){h("Expected '/', got: "+
|
||||
l);continue}break;case "authority ignore slashes":if("/"!=l&&"\\"!=l){k="authority";continue}else h("Expected authority, got: "+l);break;case "authority":if("@"==l){x&&(h("@ already seen."),p+="%40");x=!0;for(l=0;l<p.length;l++)F=p[l],"\t"==F||"\n"==F||"\r"==F?h("Invalid whitespace in authority."):":"==F&&null===this.f?this.f="":(F=c(F),null!==this.f?this.f+=F:this.v+=F);p=""}else if(void 0==l||"/"==l||"\\"==l||"?"==l||"#"==l){v-=p.length;p="";k="host";continue}else p+=l;break;case "file host":if(void 0==
|
||||
l||"/"==l||"\\"==l||"?"==l||"#"==l){2!=p.length||!r.test(p[0])||":"!=p[1]&&"|"!=p[1]?(0!=p.length&&(this.i=b.call(this,p),p=""),k="relative path start"):k="relative path";continue}else"\t"==l||"\n"==l||"\r"==l?h("Invalid whitespace in file host."):p+=l;break;case "host":case "hostname":if(":"!=l||U)if(void 0==l||"/"==l||"\\"==l||"?"==l||"#"==l){this.i=b.call(this,p);p="";k="relative path start";if(e)break a;continue}else"\t"!=l&&"\n"!=l&&"\r"!=l?("["==l?U=!0:"]"==l&&(U=!1),p+=l):h("Invalid code point in host/hostname: "+
|
||||
l);else if(this.i=b.call(this,p),p="",k="port","hostname"==e)break a;break;case "port":if(/[0-9]/.test(l))p+=l;else if(void 0==l||"/"==l||"\\"==l||"?"==l||"#"==l||e){""!=p&&(p=parseInt(p,10),p!=m[this.g]&&(this.s=p+""),p="");if(e)break a;k="relative path start";continue}else"\t"==l||"\n"==l||"\r"==l?h("Invalid code point in port: "+l):(f.call(this),this.h=!0);break;case "relative path start":"\\"==l&&h("'\\' not allowed in path.");k="relative path";if("/"!=l&&"\\"!=l)continue;break;case "relative path":if(void 0!=
|
||||
l&&"/"!=l&&"\\"!=l&&(e||"?"!=l&&"#"!=l))"\t"!=l&&"\n"!=l&&"\r"!=l&&(p+=c(l));else{"\\"==l&&h("\\ not allowed in relative path.");if(F=n[p.toLowerCase()])p=F;".."==p?(this.j.pop(),"/"!=l&&"\\"!=l&&this.j.push("")):"."==p&&"/"!=l&&"\\"!=l?this.j.push(""):"."!=p&&("file"==this.g&&0==this.j.length&&2==p.length&&r.test(p[0])&&"|"==p[1]&&(p=p[0]+":"),this.j.push(p));p="";"?"==l?(this.u="?",k="query"):"#"==l&&(this.C="#",k="fragment")}break;case "query":e||"#"!=l?void 0!=l&&"\t"!=l&&"\n"!=l&&"\r"!=l&&(this.u+=
|
||||
d(l)):(this.C="#",k="fragment");break;case "fragment":void 0!=l&&"\t"!=l&&"\n"!=l&&"\r"!=l&&(this.C+=l)}v++}}function f(){this.v=this.qa=this.g="";this.f=null;this.s=this.i="";this.j=[];this.C=this.u="";this.D=this.h=!1}function g(a,b){void 0===b||b instanceof g||(b=new g(String(b)));this.Ra=a;f.call(this);a=a.replace(/^[ \t\r\n\f]+|[ \t\r\n\f]+$/g,"");e.call(this,a,null,b)}var h=!1;if(!a.qb)try{var k=new URL("b","http://a");k.pathname="c%20d";h="http://a/c%20d"===k.href}catch(v){}if(!h){var m=Object.create(null);
|
||||
m.ftp=21;m.file=0;m.gopher=70;m.http=80;m.https=443;m.ws=80;m.wss=443;var n=Object.create(null);n["%2e"]=".";n[".%2e"]="..";n["%2e."]="..";n["%2e%2e"]="..";var r=/[a-zA-Z]/,G=/[a-zA-Z0-9\+\-\.]/;g.prototype={toString:function(){return this.href},get href(){if(this.h)return this.Ra;var a="";if(""!=this.v||null!=this.f)a=this.v+(null!=this.f?":"+this.f:"")+"@";return this.protocol+(this.D?"//"+a+this.host:"")+this.pathname+this.u+this.C},set href(a){f.call(this);e.call(this,a)},get protocol(){return this.g+
|
||||
":"},set protocol(a){this.h||e.call(this,a+":","scheme start")},get host(){return this.h?"":this.s?this.i+":"+this.s:this.i},set host(a){!this.h&&this.D&&e.call(this,a,"host")},get hostname(){return this.i},set hostname(a){!this.h&&this.D&&e.call(this,a,"hostname")},get port(){return this.s},set port(a){!this.h&&this.D&&e.call(this,a,"port")},get pathname(){return this.h?"":this.D?"/"+this.j.join("/"):this.qa},set pathname(a){!this.h&&this.D&&(this.j=[],e.call(this,a,"relative path start"))},get search(){return this.h||
|
||||
!this.u||"?"==this.u?"":this.u},set search(a){!this.h&&this.D&&(this.u="?","?"==a[0]&&(a=a.slice(1)),e.call(this,a,"query"))},get hash(){return this.h||!this.C||"#"==this.C?"":this.C},set hash(a){this.h||(this.C="#","#"==a[0]&&(a=a.slice(1)),e.call(this,a,"fragment"))},get origin(){var a;if(this.h||!this.g)return"";switch(this.g){case "data":case "file":case "javascript":case "mailto":return"null"}return(a=this.host)?this.g+"://"+a:""}};var x=a.URL;x&&(g.createObjectURL=function(a){return x.createObjectURL.apply(x,
|
||||
arguments)},g.revokeObjectURL=function(a){x.revokeObjectURL(a)});a.URL=g}})(window);var kh={},lh=Object.create,mh=Object.defineProperties,nh=Object.defineProperty;function Y(a,b){b=void 0===b?{}:b;return{value:a,configurable:!!b.ya,writable:!!b.cb,enumerable:!!b.e}}var oh=void 0;try{oh=1===nh({},"y",{get:function(){return 1}}).y}catch(a){oh=!1}var ph={};function qh(a){a=String(a);for(var b="",c=0;ph[a+b];)b=c+=1;ph[a+b]=1;var d="Symbol("+a+""+b+")";oh&&nh(Object.prototype,d,{get:void 0,set:function(a){nh(this,d,Y(a,{ya:!0,cb:!0}))},configurable:!0,enumerable:!1});return d}
|
||||
var rh=lh(null);function Z(a){if(this instanceof Z)throw new TypeError("Symbol is not a constructor");a=void 0===a?"":String(a);var b=qh(a);return oh?lh(rh,{ua:Y(a),Ka:Y(b)}):b}mh(Z,{"for":Y(function(a){a=String(a);if(kh[a])return kh[a];var b=Z(a);return kh[a]=b}),keyFor:Y(function(a){if(oh&&(!a||"Symbol"!==a[Z.toStringTag]))throw new TypeError(""+a+" is not a symbol");for(var b in kh)if(kh[b]===a)return oh?kh[b].ua:kh[b].substr(7,kh[b].length-8)})});
|
||||
mh(Z,{ub:Y(Z("hasInstance")),vb:Y(Z("isConcatSpreadable")),iterator:Y(Z("iterator")),match:Y(Z("match")),replace:Y(Z("replace")),search:Y(Z("search")),Ab:Y(Z("species")),split:Y(Z("split")),Bb:Y(Z("toPrimitive")),toStringTag:Y(Z("toStringTag")),unscopables:Y(Z("unscopables"))});mh(rh,{constructor:Y(Z),toString:Y(function(){return this.Ka}),valueOf:Y(function(){return"Symbol("+this.ua+")"})});oh&&nh(rh,Z.toStringTag,Y("Symbol",{ya:!0}));var sh="function"===typeof Symbol?Symbol:Z;/*
|
||||
|
||||
Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
window.Symbol||(window.Symbol=sh,Array.prototype[sh.iterator]=function(){function a(a,e,h){for(;;)switch(b){case 0:c=0;case 1:if(!(c<d.length)){b=3;break}b=4;return{value:d[c],done:!1};case 4:if(1!=a){b=5;break}b=-1;throw h;case 5:case 2:c++;b=1;break;case 3:b=-1;default:return{value:void 0,done:!0}}}var b=0,c,d=this,e={next:function(b){return a(0,b,void 0)},throw:function(b){return a(1,void 0,b)},return:function(){throw Error("Not yet implemented");}};ea();e[Symbol.iterator]=function(){return this};
|
||||
return e},Set.prototype[sh.iterator]=function(){function a(a,f,k){for(;;)switch(b){case 0:d=[],e.forEach(function(a){d.push(a)}),c=0;case 1:if(!(c<d.length)){b=3;break}b=4;return{value:d[c],done:!1};case 4:if(1!=a){b=5;break}b=-1;throw k;case 5:case 2:c++;b=1;break;case 3:b=-1;default:return{value:void 0,done:!0}}}var b=0,c,d,e=this,f={next:function(b){return a(0,b,void 0)},throw:function(b){return a(1,void 0,b)},return:function(){throw Error("Not yet implemented");}};ea();f[Symbol.iterator]=function(){return this};
|
||||
return f},Map.prototype[sh.iterator]=function(){function a(a,f,k){for(;;)switch(b){case 0:d=[],e.forEach(function(a,b){d.push([b,a])}),c=0;case 1:if(!(c<d.length)){b=3;break}b=4;return{value:d[c],done:!1};case 4:if(1!=a){b=5;break}b=-1;throw k;case 5:case 2:c++;b=1;break;case 3:b=-1;default:return{value:void 0,done:!0}}}var b=0,c,d,e=this,f={next:function(b){return a(0,b,void 0)},throw:function(b){return a(1,void 0,b)},return:function(){throw Error("Not yet implemented");}};ea();f[Symbol.iterator]=
|
||||
function(){return this};return f},String.prototype[sh.iterator]=function(){function a(a,e,h){for(;;)switch(b){case 0:c=0;case 1:if(!(c<d.length)){b=3;break}b=4;return{value:d[c],done:!1};case 4:if(1!=a){b=5;break}b=-1;throw h;case 5:case 2:c++;b=1;break;case 3:b=-1;default:return{value:void 0,done:!0}}}var b=0,c,d=this,e={next:function(b){return a(0,b,void 0)},throw:function(b){return a(1,void 0,b)},return:function(){throw Error("Not yet implemented");}};ea();e[Symbol.iterator]=function(){return this};
|
||||
return e});var th=document.createElement("style");th.textContent="body {transition: opacity ease-in 0.2s; } \nbody[unresolved] {opacity: 0; display: block; overflow: hidden; position: relative; } \n";var uh=document.querySelector("head");uh.insertBefore(th,uh.firstChild);var vh=window.customElements,wh=!1,xh=null;vh.polyfillWrapFlushCallback&&vh.polyfillWrapFlushCallback(function(a){xh=a;wh&&a()});function yh(){window.HTMLTemplateElement.bootstrap&&window.HTMLTemplateElement.bootstrap(window.document);xh&&xh();wh=!0;window.WebComponents.ready=!0;document.dispatchEvent(new CustomEvent("WebComponentsReady",{bubbles:!0}))}
|
||||
"complete"!==document.readyState?(window.addEventListener("load",yh),window.addEventListener("DOMContentLoaded",function(){window.removeEventListener("load",yh);yh()})):yh();}).call(this);
|
||||
|
||||
//# sourceMappingURL=webcomponents-bundle.js.map
|
||||
|
|
@ -0,0 +1,394 @@
|
|||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
var htmlConfig = {
|
||||
autoSelfClosers: {'area': true, 'base': true, 'br': true, 'col': true, 'command': true,
|
||||
'embed': true, 'frame': true, 'hr': true, 'img': true, 'input': true,
|
||||
'keygen': true, 'link': true, 'meta': true, 'param': true, 'source': true,
|
||||
'track': true, 'wbr': true, 'menuitem': true},
|
||||
implicitlyClosed: {'dd': true, 'li': true, 'optgroup': true, 'option': true, 'p': true,
|
||||
'rp': true, 'rt': true, 'tbody': true, 'td': true, 'tfoot': true,
|
||||
'th': true, 'tr': true},
|
||||
contextGrabbers: {
|
||||
'dd': {'dd': true, 'dt': true},
|
||||
'dt': {'dd': true, 'dt': true},
|
||||
'li': {'li': true},
|
||||
'option': {'option': true, 'optgroup': true},
|
||||
'optgroup': {'optgroup': true},
|
||||
'p': {'address': true, 'article': true, 'aside': true, 'blockquote': true, 'dir': true,
|
||||
'div': true, 'dl': true, 'fieldset': true, 'footer': true, 'form': true,
|
||||
'h1': true, 'h2': true, 'h3': true, 'h4': true, 'h5': true, 'h6': true,
|
||||
'header': true, 'hgroup': true, 'hr': true, 'menu': true, 'nav': true, 'ol': true,
|
||||
'p': true, 'pre': true, 'section': true, 'table': true, 'ul': true},
|
||||
'rp': {'rp': true, 'rt': true},
|
||||
'rt': {'rp': true, 'rt': true},
|
||||
'tbody': {'tbody': true, 'tfoot': true},
|
||||
'td': {'td': true, 'th': true},
|
||||
'tfoot': {'tbody': true},
|
||||
'th': {'td': true, 'th': true},
|
||||
'thead': {'tbody': true, 'tfoot': true},
|
||||
'tr': {'tr': true}
|
||||
},
|
||||
doNotIndent: {"pre": true},
|
||||
allowUnquoted: true,
|
||||
allowMissing: true,
|
||||
caseFold: true
|
||||
}
|
||||
|
||||
var xmlConfig = {
|
||||
autoSelfClosers: {},
|
||||
implicitlyClosed: {},
|
||||
contextGrabbers: {},
|
||||
doNotIndent: {},
|
||||
allowUnquoted: false,
|
||||
allowMissing: false,
|
||||
caseFold: false
|
||||
}
|
||||
|
||||
CodeMirror.defineMode("xml", function(editorConf, config_) {
|
||||
var indentUnit = editorConf.indentUnit
|
||||
var config = {}
|
||||
var defaults = config_.htmlMode ? htmlConfig : xmlConfig
|
||||
for (var prop in defaults) config[prop] = defaults[prop]
|
||||
for (var prop in config_) config[prop] = config_[prop]
|
||||
|
||||
// Return variables for tokenizers
|
||||
var type, setStyle;
|
||||
|
||||
function inText(stream, state) {
|
||||
function chain(parser) {
|
||||
state.tokenize = parser;
|
||||
return parser(stream, state);
|
||||
}
|
||||
|
||||
var ch = stream.next();
|
||||
if (ch == "<") {
|
||||
if (stream.eat("!")) {
|
||||
if (stream.eat("[")) {
|
||||
if (stream.match("CDATA[")) return chain(inBlock("atom", "]]>"));
|
||||
else return null;
|
||||
} else if (stream.match("--")) {
|
||||
return chain(inBlock("comment", "-->"));
|
||||
} else if (stream.match("DOCTYPE", true, true)) {
|
||||
stream.eatWhile(/[\w\._\-]/);
|
||||
return chain(doctype(1));
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
} else if (stream.eat("?")) {
|
||||
stream.eatWhile(/[\w\._\-]/);
|
||||
state.tokenize = inBlock("meta", "?>");
|
||||
return "meta";
|
||||
} else {
|
||||
type = stream.eat("/") ? "closeTag" : "openTag";
|
||||
state.tokenize = inTag;
|
||||
return "tag bracket";
|
||||
}
|
||||
} else if (ch == "&") {
|
||||
var ok;
|
||||
if (stream.eat("#")) {
|
||||
if (stream.eat("x")) {
|
||||
ok = stream.eatWhile(/[a-fA-F\d]/) && stream.eat(";");
|
||||
} else {
|
||||
ok = stream.eatWhile(/[\d]/) && stream.eat(";");
|
||||
}
|
||||
} else {
|
||||
ok = stream.eatWhile(/[\w\.\-:]/) && stream.eat(";");
|
||||
}
|
||||
return ok ? "atom" : "error";
|
||||
} else {
|
||||
stream.eatWhile(/[^&<]/);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
inText.isInText = true;
|
||||
|
||||
function inTag(stream, state) {
|
||||
var ch = stream.next();
|
||||
if (ch == ">" || (ch == "/" && stream.eat(">"))) {
|
||||
state.tokenize = inText;
|
||||
type = ch == ">" ? "endTag" : "selfcloseTag";
|
||||
return "tag bracket";
|
||||
} else if (ch == "=") {
|
||||
type = "equals";
|
||||
return null;
|
||||
} else if (ch == "<") {
|
||||
state.tokenize = inText;
|
||||
state.state = baseState;
|
||||
state.tagName = state.tagStart = null;
|
||||
var next = state.tokenize(stream, state);
|
||||
return next ? next + " tag error" : "tag error";
|
||||
} else if (/[\'\"]/.test(ch)) {
|
||||
state.tokenize = inAttribute(ch);
|
||||
state.stringStartCol = stream.column();
|
||||
return state.tokenize(stream, state);
|
||||
} else {
|
||||
stream.match(/^[^\s\u00a0=<>\"\']*[^\s\u00a0=<>\"\'\/]/);
|
||||
return "word";
|
||||
}
|
||||
}
|
||||
|
||||
function inAttribute(quote) {
|
||||
var closure = function(stream, state) {
|
||||
while (!stream.eol()) {
|
||||
if (stream.next() == quote) {
|
||||
state.tokenize = inTag;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return "string";
|
||||
};
|
||||
closure.isInAttribute = true;
|
||||
return closure;
|
||||
}
|
||||
|
||||
function inBlock(style, terminator) {
|
||||
return function(stream, state) {
|
||||
while (!stream.eol()) {
|
||||
if (stream.match(terminator)) {
|
||||
state.tokenize = inText;
|
||||
break;
|
||||
}
|
||||
stream.next();
|
||||
}
|
||||
return style;
|
||||
};
|
||||
}
|
||||
function doctype(depth) {
|
||||
return function(stream, state) {
|
||||
var ch;
|
||||
while ((ch = stream.next()) != null) {
|
||||
if (ch == "<") {
|
||||
state.tokenize = doctype(depth + 1);
|
||||
return state.tokenize(stream, state);
|
||||
} else if (ch == ">") {
|
||||
if (depth == 1) {
|
||||
state.tokenize = inText;
|
||||
break;
|
||||
} else {
|
||||
state.tokenize = doctype(depth - 1);
|
||||
return state.tokenize(stream, state);
|
||||
}
|
||||
}
|
||||
}
|
||||
return "meta";
|
||||
};
|
||||
}
|
||||
|
||||
function Context(state, tagName, startOfLine) {
|
||||
this.prev = state.context;
|
||||
this.tagName = tagName;
|
||||
this.indent = state.indented;
|
||||
this.startOfLine = startOfLine;
|
||||
if (config.doNotIndent.hasOwnProperty(tagName) || (state.context && state.context.noIndent))
|
||||
this.noIndent = true;
|
||||
}
|
||||
function popContext(state) {
|
||||
if (state.context) state.context = state.context.prev;
|
||||
}
|
||||
function maybePopContext(state, nextTagName) {
|
||||
var parentTagName;
|
||||
while (true) {
|
||||
if (!state.context) {
|
||||
return;
|
||||
}
|
||||
parentTagName = state.context.tagName;
|
||||
if (!config.contextGrabbers.hasOwnProperty(parentTagName) ||
|
||||
!config.contextGrabbers[parentTagName].hasOwnProperty(nextTagName)) {
|
||||
return;
|
||||
}
|
||||
popContext(state);
|
||||
}
|
||||
}
|
||||
|
||||
function baseState(type, stream, state) {
|
||||
if (type == "openTag") {
|
||||
state.tagStart = stream.column();
|
||||
return tagNameState;
|
||||
} else if (type == "closeTag") {
|
||||
return closeTagNameState;
|
||||
} else {
|
||||
return baseState;
|
||||
}
|
||||
}
|
||||
function tagNameState(type, stream, state) {
|
||||
if (type == "word") {
|
||||
state.tagName = stream.current();
|
||||
setStyle = "tag";
|
||||
return attrState;
|
||||
} else {
|
||||
setStyle = "error";
|
||||
return tagNameState;
|
||||
}
|
||||
}
|
||||
function closeTagNameState(type, stream, state) {
|
||||
if (type == "word") {
|
||||
var tagName = stream.current();
|
||||
if (state.context && state.context.tagName != tagName &&
|
||||
config.implicitlyClosed.hasOwnProperty(state.context.tagName))
|
||||
popContext(state);
|
||||
if ((state.context && state.context.tagName == tagName) || config.matchClosing === false) {
|
||||
setStyle = "tag";
|
||||
return closeState;
|
||||
} else {
|
||||
setStyle = "tag error";
|
||||
return closeStateErr;
|
||||
}
|
||||
} else {
|
||||
setStyle = "error";
|
||||
return closeStateErr;
|
||||
}
|
||||
}
|
||||
|
||||
function closeState(type, _stream, state) {
|
||||
if (type != "endTag") {
|
||||
setStyle = "error";
|
||||
return closeState;
|
||||
}
|
||||
popContext(state);
|
||||
return baseState;
|
||||
}
|
||||
function closeStateErr(type, stream, state) {
|
||||
setStyle = "error";
|
||||
return closeState(type, stream, state);
|
||||
}
|
||||
|
||||
function attrState(type, _stream, state) {
|
||||
if (type == "word") {
|
||||
setStyle = "attribute";
|
||||
return attrEqState;
|
||||
} else if (type == "endTag" || type == "selfcloseTag") {
|
||||
var tagName = state.tagName, tagStart = state.tagStart;
|
||||
state.tagName = state.tagStart = null;
|
||||
if (type == "selfcloseTag" ||
|
||||
config.autoSelfClosers.hasOwnProperty(tagName)) {
|
||||
maybePopContext(state, tagName);
|
||||
} else {
|
||||
maybePopContext(state, tagName);
|
||||
state.context = new Context(state, tagName, tagStart == state.indented);
|
||||
}
|
||||
return baseState;
|
||||
}
|
||||
setStyle = "error";
|
||||
return attrState;
|
||||
}
|
||||
function attrEqState(type, stream, state) {
|
||||
if (type == "equals") return attrValueState;
|
||||
if (!config.allowMissing) setStyle = "error";
|
||||
return attrState(type, stream, state);
|
||||
}
|
||||
function attrValueState(type, stream, state) {
|
||||
if (type == "string") return attrContinuedState;
|
||||
if (type == "word" && config.allowUnquoted) {setStyle = "string"; return attrState;}
|
||||
setStyle = "error";
|
||||
return attrState(type, stream, state);
|
||||
}
|
||||
function attrContinuedState(type, stream, state) {
|
||||
if (type == "string") return attrContinuedState;
|
||||
return attrState(type, stream, state);
|
||||
}
|
||||
|
||||
return {
|
||||
startState: function(baseIndent) {
|
||||
var state = {tokenize: inText,
|
||||
state: baseState,
|
||||
indented: baseIndent || 0,
|
||||
tagName: null, tagStart: null,
|
||||
context: null}
|
||||
if (baseIndent != null) state.baseIndent = baseIndent
|
||||
return state
|
||||
},
|
||||
|
||||
token: function(stream, state) {
|
||||
if (!state.tagName && stream.sol())
|
||||
state.indented = stream.indentation();
|
||||
|
||||
if (stream.eatSpace()) return null;
|
||||
type = null;
|
||||
var style = state.tokenize(stream, state);
|
||||
if ((style || type) && style != "comment") {
|
||||
setStyle = null;
|
||||
state.state = state.state(type || style, stream, state);
|
||||
if (setStyle)
|
||||
style = setStyle == "error" ? style + " error" : setStyle;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
|
||||
indent: function(state, textAfter, fullLine) {
|
||||
var context = state.context;
|
||||
// Indent multi-line strings (e.g. css).
|
||||
if (state.tokenize.isInAttribute) {
|
||||
if (state.tagStart == state.indented)
|
||||
return state.stringStartCol + 1;
|
||||
else
|
||||
return state.indented + indentUnit;
|
||||
}
|
||||
if (context && context.noIndent) return CodeMirror.Pass;
|
||||
if (state.tokenize != inTag && state.tokenize != inText)
|
||||
return fullLine ? fullLine.match(/^(\s*)/)[0].length : 0;
|
||||
// Indent the starts of attribute names.
|
||||
if (state.tagName) {
|
||||
if (config.multilineTagIndentPastTag !== false)
|
||||
return state.tagStart + state.tagName.length + 2;
|
||||
else
|
||||
return state.tagStart + indentUnit * (config.multilineTagIndentFactor || 1);
|
||||
}
|
||||
if (config.alignCDATA && /<!\[CDATA\[/.test(textAfter)) return 0;
|
||||
var tagAfter = textAfter && /^<(\/)?([\w_:\.-]*)/.exec(textAfter);
|
||||
if (tagAfter && tagAfter[1]) { // Closing tag spotted
|
||||
while (context) {
|
||||
if (context.tagName == tagAfter[2]) {
|
||||
context = context.prev;
|
||||
break;
|
||||
} else if (config.implicitlyClosed.hasOwnProperty(context.tagName)) {
|
||||
context = context.prev;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else if (tagAfter) { // Opening tag spotted
|
||||
while (context) {
|
||||
var grabbers = config.contextGrabbers[context.tagName];
|
||||
if (grabbers && grabbers.hasOwnProperty(tagAfter[2]))
|
||||
context = context.prev;
|
||||
else
|
||||
break;
|
||||
}
|
||||
}
|
||||
while (context && context.prev && !context.startOfLine)
|
||||
context = context.prev;
|
||||
if (context) return context.indent + indentUnit;
|
||||
else return state.baseIndent || 0;
|
||||
},
|
||||
|
||||
electricInput: /<\/[\s\w:]+>$/,
|
||||
blockCommentStart: "<!--",
|
||||
blockCommentEnd: "-->",
|
||||
|
||||
configuration: config.htmlMode ? "html" : "xml",
|
||||
helperType: config.htmlMode ? "html" : "xml",
|
||||
|
||||
skipAttribute: function(state) {
|
||||
if (state.state == attrValueState)
|
||||
state.state = attrState
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
CodeMirror.defineMIME("text/xml", "xml");
|
||||
CodeMirror.defineMIME("application/xml", "xml");
|
||||
if (!CodeMirror.mimeModes.hasOwnProperty("text/html"))
|
||||
CodeMirror.defineMIME("text/html", {name: "xml", htmlMode: true});
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
navIndex = 0
|
||||
|
||||
navChange = index => {
|
||||
this.navIndex = index
|
||||
this.update()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<o-nav onChange={this.navChange}>
|
||||
<item active={this.navIndex === 0}>我的项目</item>
|
||||
<item active={this.navIndex === 1}>所有项目</item>
|
||||
</o-nav>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
page = 0
|
||||
|
||||
onChange = index => {
|
||||
this.page = index
|
||||
console.log('page' + index)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<o-equal-space>
|
||||
<o-pagination
|
||||
total={25}
|
||||
currentPage={this.page}
|
||||
pageSize={5}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
</o-equal-space>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,205 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">//https://progressbarjs.readthedocs.io/en/latest/api/shape/
|
||||
const options = {
|
||||
strokeWidth: 2,
|
||||
color: '#07C160',
|
||||
trailColor: '#ddd'
|
||||
};
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<o-path-progress
|
||||
type='Line'
|
||||
progress={0.5}
|
||||
text={'test'}
|
||||
options={options}
|
||||
initialAnimate={true}
|
||||
containerStyle={{
|
||||
width: '200px',
|
||||
height: '20px'
|
||||
}}
|
||||
containerClassName={'.progressbar'}
|
||||
></o-path-progress>
|
||||
|
||||
<br /><br /><br />
|
||||
|
||||
<o-path-progress
|
||||
type='Circle'
|
||||
progress={0.5}
|
||||
text={'test'}
|
||||
options={options}
|
||||
initialAnimate={true}
|
||||
containerStyle={{
|
||||
width: '200px',
|
||||
height: '200px'
|
||||
}}
|
||||
containerClassName={'.progressbar'}
|
||||
></o-path-progress>
|
||||
|
||||
<br /><br /><br />
|
||||
|
||||
<o-path-progress
|
||||
type='SemiCircle'
|
||||
progress={0.5}
|
||||
text={'test'}
|
||||
options={options}
|
||||
initialAnimate={true}
|
||||
containerStyle={{
|
||||
width: '200px',
|
||||
height: '100px'
|
||||
}}
|
||||
containerClassName={'.progressbar'}
|
||||
></o-path-progress>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,195 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
popoverIt = (evt) => {
|
||||
this.popoverShow = !this.popoverShow
|
||||
this.popoverTarget = evt.target
|
||||
this.direction = evt.target.innerText
|
||||
this.update()
|
||||
}
|
||||
|
||||
onClose = () => {
|
||||
this.popoverShow = false
|
||||
this.update()
|
||||
}
|
||||
|
||||
css() {
|
||||
return `.btn{
|
||||
margin-right:5px !important;
|
||||
}`
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div style='position:relative;left:120px;top:100px;'>
|
||||
<o-button size='small' class='btn' onClick={this.popoverIt}>top-left</o-button>
|
||||
<o-button size='small' class='btn' onClick={this.popoverIt}>top</o-button>
|
||||
<o-button size='small' class='btn' onClick={this.popoverIt}>top-right</o-button>
|
||||
<br />
|
||||
<o-button size='small' class='btn' onClick={this.popoverIt}>left-top</o-button>
|
||||
<o-button size='small' class='btn' onClick={this.popoverIt}>left</o-button>
|
||||
<o-button size='small' class='btn' onClick={this.popoverIt}>left-bottom</o-button>
|
||||
<br />
|
||||
<o-button size='small' class='btn' onClick={this.popoverIt}>bottom-left</o-button>
|
||||
<o-button size='small' class='btn' onClick={this.popoverIt}>bottom</o-button>
|
||||
<o-button size='small' class='btn' onClick={this.popoverIt}>bottom-right</o-button>
|
||||
<br />
|
||||
<o-button size='small' class='btn' onClick={this.popoverIt}>right-top</o-button>
|
||||
<o-button size='small' class='btn' onClick={this.popoverIt}>right</o-button>
|
||||
<o-button size='small' class='btn' onClick={this.popoverIt}>right-bottom</o-button>
|
||||
</div>
|
||||
<o-popover show={this.popoverShow} target={this.popoverTarget} direction={this.direction} onClose={this.onClose}>
|
||||
<div>测试内容....</div>
|
||||
<div>测试内容</div>
|
||||
<div>测试内容测试内容</div>
|
||||
</o-popover>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,188 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
popupShow = false
|
||||
|
||||
onClose = (e) => {
|
||||
this.popupShow = false
|
||||
this.update()
|
||||
}
|
||||
|
||||
onConfirm = (e) => {
|
||||
this.popupShow = false
|
||||
this.update()
|
||||
}
|
||||
|
||||
showPopup = (e) => {
|
||||
this.popupShow = true
|
||||
this.update()
|
||||
}
|
||||
|
||||
render(props, data) {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<o-button onClick={this.showPopup}>Show popup</o-button>
|
||||
<o-popup
|
||||
onClose={this.onClose}
|
||||
onConfirm={this.onConfirm}
|
||||
show={this.popupShow}
|
||||
title='My Title'
|
||||
cancelText='cancel'
|
||||
confirmText='confirm'
|
||||
>
|
||||
<div>Content</div>
|
||||
<div>Content</div>
|
||||
<div>Content</div>
|
||||
<div>Content</div>
|
||||
</o-popup>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://tencent.github.io/omi/packages/omio/dist/omi.min.js"></script>
|
||||
<script src="./libs/omiu.js"></script>
|
||||
|
||||
<script>
|
||||
var createElement = Omi.createElement
|
||||
var define = Omi.define
|
||||
var WeElement = Omi.WeElement
|
||||
var render = Omi.render
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body style="background-color:#eee;">
|
||||
|
||||
<script>
|
||||
var script = document.createElement("script");
|
||||
script.innerHTML = parent._sourceCode;
|
||||
document.body.appendChild(script)
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
render() {
|
||||
return (
|
||||
<o-progress bgColor="#ccc" innerColor="#07C160" value={50} />
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<o-radio checked name='group' label='groupA'></o-radio>
|
||||
<o-radio name='group' label='groupB'></o-radio>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
valueA = 0
|
||||
valueB = 2
|
||||
valueC = 3.5
|
||||
|
||||
onSelect = (value) => {
|
||||
this.valueA = value
|
||||
this.update()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<o-rate total={5} value={this.valueA} color='#07C160' onSelect={this.onSelect} />
|
||||
<br />
|
||||
<o-rate total={5} value={this.valueB} color='#07C160' />
|
||||
<br />
|
||||
<o-rate total={5} value={this.valueC} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,248 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">
|
||||
define('my-app', class extends WeElement {
|
||||
|
||||
css() {
|
||||
return `
|
||||
.row{
|
||||
margin:6px;
|
||||
}
|
||||
|
||||
.col {
|
||||
color: white;
|
||||
text-align:center;
|
||||
height:60px;
|
||||
line-height:60px;
|
||||
|
||||
}
|
||||
.col:nth-child(odd) {
|
||||
background:#07C160;
|
||||
}
|
||||
.col:nth-child(even) {
|
||||
background:#F95050;
|
||||
}`
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<o-row class='row'>
|
||||
<col class='col' span={12}>col span 12</col>
|
||||
<col class='col' span={12}>col span 12</col>
|
||||
</o-row>
|
||||
|
||||
<o-row class='row'>
|
||||
<col class='col' span={8}>col span 8</col>
|
||||
<col class='col' span={8}>col span 8</col>
|
||||
<col class='col' span={8}>col span 8</col>
|
||||
</o-row>
|
||||
|
||||
<o-row class='row'>
|
||||
<col class='col' span={6}>col span 6</col>
|
||||
<col class='col' span={6}>col span 6</col>
|
||||
<col class='col' span={6}>col span 6</col>
|
||||
<col class='col' span={6}>col span 6</col>
|
||||
</o-row>
|
||||
|
||||
<o-row class='row'>
|
||||
<col class='col' span={18}>col span 18</col>
|
||||
<col class='col' span={6}>col span 6</col>
|
||||
</o-row>
|
||||
|
||||
<o-row class='row'>
|
||||
<col class='col' span={6}>col span 6</col>
|
||||
<col class='col' span={18}>col span 18</col>
|
||||
</o-row>
|
||||
|
||||
<o-row class='row'>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
</o-row>
|
||||
|
||||
<o-row class='row'>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
</o-row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')
|
||||
</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
list = [{
|
||||
text: 'Item 1'
|
||||
}, {
|
||||
text: 'Item 2'
|
||||
}, {
|
||||
text: 'Item 3'
|
||||
}, {
|
||||
text: 'Item 4'
|
||||
}, {
|
||||
text: 'Item 5'
|
||||
}, {
|
||||
text: 'Item 6'
|
||||
}, {
|
||||
text: 'Item 7'
|
||||
}]
|
||||
|
||||
selectedIndex = 1
|
||||
|
||||
onSelect = (item, index) => {
|
||||
this.selectedIndex = index
|
||||
this.update()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<o-select-list
|
||||
onSelect={this.onSelect}
|
||||
list={this.list}
|
||||
selectedIndex={this.selectedIndex}
|
||||
/>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,185 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">const state = {
|
||||
DONE: 0,
|
||||
ERROR: 1,
|
||||
DOING: 2,
|
||||
TODO: 3
|
||||
}
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
|
||||
itemsA = [
|
||||
{ name: 'Finished', description: 'This is a description.', state: state.DONE },
|
||||
{ name: 'In Progress', description: 'This is a description.', state: state.DOING },
|
||||
{ name: 'Waiting', description: 'This is a description.', state: state.TODO }
|
||||
]
|
||||
|
||||
itemsB = [
|
||||
{ name: 'Finished', description: 'This is a description.', state: state.DONE },
|
||||
{ name: 'Error', description: 'This is a description.', state: state.ERROR },
|
||||
{ name: 'Waiting', description: 'This is a description.', state: state.TODO }
|
||||
]
|
||||
|
||||
itemsC = [
|
||||
{ name: 'Finished', description: 'This is a description.', state: state.DONE },
|
||||
{ name: 'Finished', description: 'This is a description.', state: state.DONE },
|
||||
{ name: 'Finished', description: 'This is a description.', state: state.DONE }
|
||||
]
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<o-step items={this.itemsA} />
|
||||
<o-step items={this.itemsB} />
|
||||
<o-step items={this.itemsC} />
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
render(props, data) {
|
||||
return (
|
||||
<o-equal-space>
|
||||
<o-switch onChange={this.onChangeB} checked={false}>
|
||||
</o-switch>
|
||||
|
||||
<o-switch onChange={this.onChangeA} checked={true}>
|
||||
</o-switch>
|
||||
</o-equal-space>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
tabIndex = 0
|
||||
|
||||
tabChange = (index) => {
|
||||
this.tabIndex = index
|
||||
this.update()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<o-tab onChange={this.tabChange}>
|
||||
<item active={this.tabIndex === 0}>朋友相册</item>
|
||||
<item active={this.tabIndex === 1}>时刻视频</item>
|
||||
</o-tab>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,208 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
dataSource = [{
|
||||
id: 1,
|
||||
name: 'xwang',
|
||||
age: 18,
|
||||
address: 'Tencent'
|
||||
}, {
|
||||
id: 2,
|
||||
name: 'dntzhang',
|
||||
age: 12,
|
||||
address: 'Tencent'
|
||||
}, {
|
||||
id: 3,
|
||||
name: 'lucy',
|
||||
age: 12,
|
||||
address: 'Tencent'
|
||||
}, {
|
||||
id: 4,
|
||||
name: 'john',
|
||||
age: 12,
|
||||
address: 'Tencent'
|
||||
}, {
|
||||
id: 5,
|
||||
name: 'tim',
|
||||
age: 12,
|
||||
address: 'Tencent'
|
||||
}];
|
||||
|
||||
columns = [{
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
}, {
|
||||
title: 'Age',
|
||||
key: 'age',
|
||||
}, {
|
||||
title: 'Address',
|
||||
key: 'address',
|
||||
}, {
|
||||
title: '操作',
|
||||
render: (item) => (
|
||||
<span>
|
||||
<a href="javascript:;" onClick={e => { this.removeItem(item) }}>Delete</a>
|
||||
</span>
|
||||
)
|
||||
}]
|
||||
|
||||
removeItem = (item) => {
|
||||
this.table.removeItem(item)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<o-table
|
||||
ref={e => { this.table = e }}
|
||||
dataSource={this.dataSource}
|
||||
columns={this.columns}>
|
||||
</o-table>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')
|
||||
</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
render() {
|
||||
return (
|
||||
<o-timeline data={[
|
||||
{ msgA: '2018.11.11', msgB: 'create project', msgC: '15:22:09', msgD: '[sub msg]' },
|
||||
{ msgA: '2018.11.11', msgB: 'delete readme', msgC: '15:22:09', msgD: '[sub msg]' },
|
||||
{ msgA: '2018.11.11', msgB: 'update readme', msgC: '15:22:09', msgD: '[sub msg]' },
|
||||
{ msgA: '2018.11.11', msgB: 'others', msgC: '15:22:09', msgD: '[others]' }
|
||||
]} />
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
successShow = false
|
||||
loadingShow = false
|
||||
|
||||
showSuccess =() => {
|
||||
this.loadingShow = false
|
||||
this.successShow = true
|
||||
this.update()
|
||||
}
|
||||
|
||||
showLoading =() => {
|
||||
this.successShow = false
|
||||
this.loadingShow = true
|
||||
this.update()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<o-button onClick={this.showSuccess}>Show Success Toast</o-button>
|
||||
<o-button onClick={this.showLoading}>Show Loading Toast</o-button>
|
||||
<o-toast show={this.successShow}>支付成功</o-toast>
|
||||
<o-toast type='loading' show={this.loadingShow}>加载中</o-toast>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
'use strict';
|
||||
|
||||
// Do this as the first thing so that any code reading it knows the right env.
|
||||
process.env.BABEL_ENV = 'production';
|
||||
process.env.NODE_ENV = 'production';
|
||||
|
||||
// Makes the script crash on unhandled rejections instead of silently
|
||||
// ignoring them. In the future, promise rejections that are not handled will
|
||||
// terminate the Node.js process with a non-zero exit code.
|
||||
process.on('unhandledRejection', err => {
|
||||
throw err;
|
||||
});
|
||||
|
||||
// Ensure environment variables are read.
|
||||
require('../config/env');
|
||||
|
||||
const path = require('path');
|
||||
const chalk = require('chalk');
|
||||
const fs = require('fs-extra');
|
||||
const webpack = require('webpack');
|
||||
const config = require('../config/webpack.config.prod');
|
||||
const paths = require('../config/paths');
|
||||
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
|
||||
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
|
||||
const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
|
||||
const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
|
||||
const printBuildError = require('react-dev-utils/printBuildError');
|
||||
|
||||
const measureFileSizesBeforeBuild =
|
||||
FileSizeReporter.measureFileSizesBeforeBuild;
|
||||
const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
|
||||
const useYarn = fs.existsSync(paths.yarnLockFile);
|
||||
|
||||
// These sizes are pretty large. We'll warn for bundles exceeding them.
|
||||
const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
|
||||
const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
|
||||
|
||||
// Warn and crash if required files are missing
|
||||
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// First, read the current file sizes in build directory.
|
||||
// This lets us display how much they changed later.
|
||||
measureFileSizesBeforeBuild(paths.appBuild)
|
||||
.then(previousFileSizes => {
|
||||
// Remove all content but keep the directory so that
|
||||
// if you're in it, you don't end up in Trash
|
||||
fs.emptyDirSync(paths.appBuild);
|
||||
// Merge with the public folder
|
||||
copyPublicFolder();
|
||||
// Start the webpack build
|
||||
return build(previousFileSizes);
|
||||
})
|
||||
.then(
|
||||
({ stats, previousFileSizes, warnings }) => {
|
||||
if (warnings.length) {
|
||||
console.log(chalk.yellow('Compiled with warnings.\n'));
|
||||
console.log(warnings.join('\n\n'));
|
||||
console.log(
|
||||
'\nSearch for the ' +
|
||||
chalk.underline(chalk.yellow('keywords')) +
|
||||
' to learn more about each warning.'
|
||||
);
|
||||
console.log(
|
||||
'To ignore, add ' +
|
||||
chalk.cyan('// eslint-disable-next-line') +
|
||||
' to the line before.\n'
|
||||
);
|
||||
} else {
|
||||
console.log(chalk.green('Compiled successfully.\n'));
|
||||
}
|
||||
|
||||
console.log('File sizes after gzip:\n');
|
||||
printFileSizesAfterBuild(
|
||||
stats,
|
||||
previousFileSizes,
|
||||
paths.appBuild,
|
||||
WARN_AFTER_BUNDLE_GZIP_SIZE,
|
||||
WARN_AFTER_CHUNK_GZIP_SIZE
|
||||
);
|
||||
console.log();
|
||||
|
||||
const appPackage = require(paths.appPackageJson);
|
||||
const publicUrl = paths.publicUrl;
|
||||
const publicPath = config.output.publicPath;
|
||||
const buildFolder = path.relative(process.cwd(), paths.appBuild);
|
||||
printHostingInstructions(
|
||||
appPackage,
|
||||
publicUrl,
|
||||
publicPath,
|
||||
buildFolder,
|
||||
useYarn
|
||||
);
|
||||
},
|
||||
err => {
|
||||
console.log(chalk.red('Failed to compile.\n'));
|
||||
printBuildError(err);
|
||||
process.exit(1);
|
||||
}
|
||||
);
|
||||
|
||||
// Create the production build and print the deployment instructions.
|
||||
function build(previousFileSizes) {
|
||||
console.log('Creating an optimized production build...');
|
||||
|
||||
let compiler = webpack(config);
|
||||
return new Promise((resolve, reject) => {
|
||||
compiler.run((err, stats) => {
|
||||
if (err) {
|
||||
return reject(err);
|
||||
}
|
||||
const messages = formatWebpackMessages(stats.toJson({}, true));
|
||||
if (messages.errors.length) {
|
||||
// Only keep the first error. Others are often indicative
|
||||
// of the same problem, but confuse the reader with noise.
|
||||
if (messages.errors.length > 1) {
|
||||
messages.errors.length = 1;
|
||||
}
|
||||
return reject(new Error(messages.errors.join('\n\n')));
|
||||
}
|
||||
if (
|
||||
process.env.CI &&
|
||||
(typeof process.env.CI !== 'string' ||
|
||||
process.env.CI.toLowerCase() !== 'false') &&
|
||||
messages.warnings.length
|
||||
) {
|
||||
console.log(
|
||||
chalk.yellow(
|
||||
'\nTreating warnings as errors because process.env.CI = true.\n' +
|
||||
'Most CI servers set it automatically.\n'
|
||||
)
|
||||
);
|
||||
return reject(new Error(messages.warnings.join('\n\n')));
|
||||
}
|
||||
return resolve({
|
||||
stats,
|
||||
previousFileSizes,
|
||||
warnings: messages.warnings,
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function copyPublicFolder() {
|
||||
fs.copySync(paths.appPublic, paths.appBuild, {
|
||||
dereference: true,
|
||||
filter: file => file !== paths.appHtml,
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
'use strict';
|
||||
|
||||
// Do this as the first thing so that any code reading it knows the right env.
|
||||
process.env.BABEL_ENV = 'development';
|
||||
process.env.NODE_ENV = 'development';
|
||||
|
||||
// Makes the script crash on unhandled rejections instead of silently
|
||||
// ignoring them. In the future, promise rejections that are not handled will
|
||||
// terminate the Node.js process with a non-zero exit code.
|
||||
process.on('unhandledRejection', err => {
|
||||
throw err;
|
||||
});
|
||||
|
||||
// Ensure environment variables are read.
|
||||
require('../config/env');
|
||||
|
||||
const fs = require('fs');
|
||||
const chalk = require('chalk');
|
||||
const webpack = require('webpack');
|
||||
const WebpackDevServer = require('webpack-dev-server');
|
||||
const clearConsole = require('react-dev-utils/clearConsole');
|
||||
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
|
||||
const {
|
||||
choosePort,
|
||||
createCompiler,
|
||||
prepareProxy,
|
||||
prepareUrls,
|
||||
} = require('react-dev-utils/WebpackDevServerUtils');
|
||||
const openBrowser = require('react-dev-utils/openBrowser');
|
||||
const paths = require('../config/paths');
|
||||
const config = require('../config/webpack.config.dev');
|
||||
const createDevServerConfig = require('../config/webpackDevServer.config');
|
||||
|
||||
const useYarn = fs.existsSync(paths.yarnLockFile);
|
||||
const isInteractive = process.stdout.isTTY;
|
||||
|
||||
// Warn and crash if required files are missing
|
||||
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// Tools like Cloud9 rely on this.
|
||||
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
|
||||
const HOST = process.env.HOST || '0.0.0.0';
|
||||
|
||||
if (process.env.HOST) {
|
||||
console.log(
|
||||
chalk.cyan(
|
||||
`Attempting to bind to HOST environment variable: ${chalk.yellow(
|
||||
chalk.bold(process.env.HOST)
|
||||
)}`
|
||||
)
|
||||
);
|
||||
console.log(
|
||||
`If this was unintentional, check that you haven't mistakenly set it in your shell.`
|
||||
);
|
||||
console.log(`Learn more here: ${chalk.yellow('http://bit.ly/2mwWSwH')}`);
|
||||
console.log();
|
||||
}
|
||||
|
||||
// We attempt to use the default port but if it is busy, we offer the user to
|
||||
// run on a different port. `choosePort()` Promise resolves to the next free port.
|
||||
choosePort(HOST, DEFAULT_PORT)
|
||||
.then(port => {
|
||||
if (port == null) {
|
||||
// We have not found a port.
|
||||
return;
|
||||
}
|
||||
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
|
||||
const appName = require(paths.appPackageJson).name;
|
||||
const urls = prepareUrls(protocol, HOST, port);
|
||||
// Create a webpack compiler that is configured with custom messages.
|
||||
const compiler = createCompiler(webpack, config, appName, urls, useYarn);
|
||||
// Load proxy config
|
||||
const proxySetting = require(paths.appPackageJson).proxy;
|
||||
const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
|
||||
// Serve webpack assets generated by the compiler over a web sever.
|
||||
const serverConfig = createDevServerConfig(
|
||||
proxyConfig,
|
||||
urls.lanUrlForConfig
|
||||
);
|
||||
const devServer = new WebpackDevServer(compiler, serverConfig);
|
||||
// Launch WebpackDevServer.
|
||||
devServer.listen(port, HOST, err => {
|
||||
if (err) {
|
||||
return console.log(err);
|
||||
}
|
||||
if (isInteractive) {
|
||||
clearConsole();
|
||||
}
|
||||
console.log(chalk.cyan('Starting the development server...\n'));
|
||||
openBrowser(urls.localUrlForBrowser);
|
||||
});
|
||||
|
||||
['SIGINT', 'SIGTERM'].forEach(function(sig) {
|
||||
process.on(sig, function() {
|
||||
devServer.close();
|
||||
process.exit();
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
if (err && err.message) {
|
||||
console.log(err.message);
|
||||
}
|
||||
process.exit(1);
|
||||
});
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
'use strict';
|
||||
|
||||
// Do this as the first thing so that any code reading it knows the right env.
|
||||
process.env.BABEL_ENV = 'test';
|
||||
process.env.NODE_ENV = 'test';
|
||||
process.env.PUBLIC_URL = '';
|
||||
|
||||
// Makes the script crash on unhandled rejections instead of silently
|
||||
// ignoring them. In the future, promise rejections that are not handled will
|
||||
// terminate the Node.js process with a non-zero exit code.
|
||||
process.on('unhandledRejection', err => {
|
||||
throw err;
|
||||
});
|
||||
|
||||
// Ensure environment variables are read.
|
||||
require('../config/env');
|
||||
|
||||
const jest = require('jest');
|
||||
let argv = process.argv.slice(2);
|
||||
|
||||
// Watch unless on CI or in coverage mode
|
||||
if (!process.env.CI && argv.indexOf('--coverage') < 0) {
|
||||
argv.push('--watch');
|
||||
}
|
||||
|
||||
|
||||
jest.run(argv);
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
|
||||
html,body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background-color: #eee;
|
||||
font-family:proxima-nova,"Helvetica Neue",Helvetica,Roboto, PT Sans, DejaVu Sans, Arial,Segoe UI Light,Segoe UI,Microsoft Jhenghei,Mirco Yahei,'sans-serif';
|
||||
}
|
||||
|
||||
img,ul,li{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: #0366d6;
|
||||
}
|
||||
|
||||
table{
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table,td,th{
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
td,th{
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
html,body{
|
||||
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.content img{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.content code[class*="language-"],
|
||||
.content pre[class*="language-"] {
|
||||
font-family: Consolas, "Liberation Mono", Courier, monospace;
|
||||
line-height: 18px;
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content pre[class*="language-"] {
|
||||
padding-left: 10px;
|
||||
}
|
||||
.content p{
|
||||
font-size: 14px;
|
||||
}
|
||||
.content p,.content h1,.content h2,.content h3,.content h4,.content h5{
|
||||
padding-left:10px;
|
||||
padding-right:10px;
|
||||
}
|
||||
|
||||
.line-highlight:before, .line-highlight[data-end]:after{
|
||||
top: 0em;
|
||||
}
|
||||
}
|
||||
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
blockquote::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0px;
|
||||
background-color: #dfe2e5;
|
||||
height: 24px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
pre[data-line] {
|
||||
position: relative;
|
||||
padding: 1em 0 1em 1em !important;
|
||||
}
|
||||
|
||||
.line-highlight:before, .line-highlight[data-end]:after{
|
||||
display: none;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"], pre[class*="language-"] {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
|
||||
img{
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.content ul{
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
.content table tr:nth-child(2n) {
|
||||
background-color: #f6f8fa;
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { render } from 'omi'
|
||||
import './assets/index.css'
|
||||
import './elements/my-frame.js'
|
||||
import Store from './store'
|
||||
|
||||
render(<my-frame />, '#root', new Store({ lan: 'zh-cn' }))
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
const config = {
|
||||
menus: {
|
||||
'zh-cn': [
|
||||
{
|
||||
title: 'Omi',
|
||||
list: [
|
||||
{ name: '简介', md: 'introduction' },
|
||||
{ name: '安装', md: 'installation' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '基础概念',
|
||||
list: [
|
||||
{ name: 'JSX', md: 'jsx' },
|
||||
{ name: 'Props', md: 'props' },
|
||||
{ name: '事件', md: 'event' },
|
||||
{ name: '生命周期', md: 'lifecycle' },
|
||||
{ name: 'Update', md: 'update' },
|
||||
{ name: 'Ref', md: 'ref' },
|
||||
{ name: 'Class', md: 'class' },
|
||||
{ name: 'Store', md: 'store' },
|
||||
{ name: 'CSS', md: 'css' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '其他',
|
||||
list: [
|
||||
{ name: 'Omim', md: 'omim' },
|
||||
{ name: '路由', md: 'router' },
|
||||
{ name: '服务端渲染', md: 'ssr' },
|
||||
{ name: '生态与例子', md: 'other' },
|
||||
{ name: 'Mps', md: 'mps' },
|
||||
{ name: 'Omip 多端开发', md: 'omip' }
|
||||
]
|
||||
}
|
||||
],
|
||||
en: [
|
||||
{
|
||||
title: 'Omi',
|
||||
list: [
|
||||
{ name: 'Introduction', md: 'introduction' },
|
||||
{ name: 'Installation', md: 'installation' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Base',
|
||||
list: [
|
||||
{ name: 'JSX', md: 'jsx' },
|
||||
{ name: 'Props', md: 'props' },
|
||||
{ name: 'Event', md: 'event' },
|
||||
{ name: 'Lifecycle', md: 'lifecycle' },
|
||||
{ name: 'Update', md: 'update' },
|
||||
{ name: 'Ref', md: 'ref' },
|
||||
{ name: 'Class', md: 'class' },
|
||||
{ name: 'Store', md: 'store' },
|
||||
{ name: 'CSS', md: 'css' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Other',
|
||||
list: [
|
||||
{ name: 'Omim', md: 'omim' },
|
||||
{ name: 'Router', md: 'router' },
|
||||
{ name: 'Server-Side Rendering', md: 'ssr' },
|
||||
{ name: 'Ecosystem and examples', md: 'other' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
export default config
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
## Class
|
||||
|
||||
Omi has two built-in class methods `extractClass` and `classNames`.
|
||||
|
||||
```js
|
||||
import { classNames, extractClass } from 'omi'
|
||||
|
||||
define('my-element', class extends WeElement {
|
||||
render(props) {
|
||||
//extractClass will take out this class/className from props and merge the other classNames to obj
|
||||
const cls = extractClass(props, 'o-my-class', {
|
||||
'other-class': true,
|
||||
'other-class-b': this.xxx === 1
|
||||
})
|
||||
|
||||
return (
|
||||
<div {...cls} {...props}>
|
||||
Test
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
The `classNames` is the same as [classnames](https://github.com/JedWatson/classnames) of [npm](https://www.npmjs.com/package/classnames).
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
## CSS
|
||||
|
||||
This is the css of props, not `static css`, which provides the ability to modify scoped style within shadow dom.
|
||||
|
||||
## Example
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
static css = `h1{
|
||||
color: red;
|
||||
}`
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h1>Look at my color!<h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
The h1 of `my-element' above is red. Is there any way to modify it?
|
||||
|
||||
```jsx
|
||||
define('my-app', class extends WeElement {
|
||||
|
||||
myCSS = `
|
||||
h1{
|
||||
color: green;
|
||||
}`
|
||||
|
||||
onClick = () => {
|
||||
//Dynamic modification
|
||||
this.myCSS = `
|
||||
h1{
|
||||
color: blue;
|
||||
}`
|
||||
this.update()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div onClick={this.onClick}>
|
||||
<my-element css={this.myCSS} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
It can also be guaranteed that it can be modified in the following ways:
|
||||
|
||||
```css
|
||||
color: blue!important;
|
||||
```
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
## Event
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
onClick = (evt) => {
|
||||
alert('Hello Omi!')
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<h1 onClick={this.onClick}>Hello, world!</h1>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### Custom Event
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
onClick = (evt) => {
|
||||
this.fire('myevent', { name: 'abc' })
|
||||
}
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<h1 onClick={this.onClick}>Hello, world!</h1>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Then bind events on your custom elements:
|
||||
|
||||
```jsx
|
||||
<my-element onMyEvent={(evt) => { alert(evt.detail.name) }}></my-element>
|
||||
```
|
||||
|
||||
Fire triggers a custom event by `this.fire`. The first parameter of fire is the name of the event, and the second parameter is the data passed. The transmitted data can be obtained by `evt.detail'.
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
## Installation
|
||||
|
||||
Simply download and include with `<script>`. Omi will be registered as a global variable.
|
||||
|
||||
* [Omi Development Version](https://unpkg.com/omi@latest/dist/omi.js)
|
||||
* [Omi Production Version](https://unpkg.com/omi@latest/dist/omi.min.js)
|
||||
|
||||
Install via npm:
|
||||
|
||||
```
|
||||
npm i omi
|
||||
```
|
||||
|
||||
If you need to be compatible with IE8+, you can choose omio, which has almost the same API as omi, and Omi will be registered as a global variable.
|
||||
|
||||
* [Omio Development Version](https://unpkg.com/omio@latest/dist/omi.js)
|
||||
* [Omio Production Version](https://unpkg.com/omi@latest/dist/omi.min.js)
|
||||
|
||||
Install via npm:
|
||||
|
||||
```
|
||||
npm i omio
|
||||
```
|
||||
|
||||
## CLI
|
||||
|
||||
Omi provides the official CLI. You don't need to learn how to configure webpack, Babel or TypeScript. CLI helps you configure everything and provides various templates for different project types.
|
||||
|
||||
```bash
|
||||
$ npm i omi-cli -g # install cli
|
||||
$ omi init my-app # init project
|
||||
$ cd my-app
|
||||
$ npm start # develop
|
||||
$ npm run build # release
|
||||
```
|
||||
|
||||
> `npx omi-cli init my-app` is also supported(npm v5.2.0+).
|
||||
|
||||
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
|
||||
```
|
||||
|
||||
|
||||
### 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：
|
||||
|
||||
```json
|
||||
...
|
||||
"build": "PUBLIC_URL=https://your.url.com/sub node scripts/build.js",
|
||||
"build-windows": "set PUBLIC_URL=https://your.url.com/sub&& 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"
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
## Project Template
|
||||
|
||||
| **Template Type**| **Command**| **Describe**|
|
||||
| ------------ | -----------| ----------------- |
|
||||
|Base Template(v3.3.0+)|`omi init my-app`| Basic omi or omio(IE8+) project template.|
|
||||
|小程序模板(v3.3.5+)|`omi init-p my-app`| Omi 开发小程序 |
|
||||
|Base Template with snapshoot|`omi init-snap my-app`| Basic omi or omio(IE8+) project template with snapshoot prerendering.|
|
||||
|TypeScript Template(omi-cli v3.3.0+)|`omi init-ts my-app`|Basic template with typescript.|
|
||||
|Mobile Template|`omi init-weui my-app`| Mobile web app template with weui and omi-router.|
|
||||
|MVVM Template(omi-cli v3.0.22+)|`omi init-mvvm my-app` |MVVM template.|
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
## What's Omis ？
|
||||
|
||||
Omis (pronounced /ˈomɪs/) is Functional Style, Easy Store and Hyperscript Component Framework.
|
||||
|
||||
## Add Omi in One Minute
|
||||
|
||||
```jsx
|
||||
import { render } from 'omi'
|
||||
|
||||
const Counter = (props, store) => {
|
||||
return (
|
||||
<div>
|
||||
<button onClick={store.sub}>-</button>
|
||||
<text>{store.count}</text>
|
||||
<button onClick={store.add}>+</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Counter.store = _ => {
|
||||
return {
|
||||
count: 1,
|
||||
add(e) {
|
||||
this.count++
|
||||
this.update()
|
||||
},
|
||||
sub() {
|
||||
this.count--
|
||||
this.update()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render(<Counter />, 'body')
|
||||
```
|
||||
|
||||
You can also use hyperscript **with no build tooling**:
|
||||
|
||||
```js
|
||||
import { render, h } from 'omi'
|
||||
|
||||
const Counter = (props, store) => {
|
||||
return (
|
||||
h('div', {}, [
|
||||
h('button', { onClick: store.sub }, '-')
|
||||
h('text', {}, store.count)
|
||||
h('button', { onClick: store.add }, '+')
|
||||
])
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
You're already getting started! Congratulations!
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
## JSX
|
||||
|
||||
JSX is the best UI expression with the least grammatical noise, the strongest expressive ability and Turing complete. The template engine is not complete, the template string is Turing complete, but the grammatical noise is too big.
|
||||
|
||||
```js
|
||||
JSX > JS
|
||||
```
|
||||
|
||||
## Hello JSX
|
||||
|
||||
With JSX, closed XML tags can be written in JS to express DOM structures, such as:
|
||||
|
||||
```jsx
|
||||
const element = <h1>Hello, world!</h1>
|
||||
```
|
||||
|
||||
## Data binding
|
||||
|
||||
Variables or expressions, or JS statement blocks, are wrapped in single parentheses according to the binding:
|
||||
|
||||
```jsx
|
||||
<h1>{user.name}</h1>
|
||||
```
|
||||
|
||||
Try it in Omi's render method:
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
render(props) {
|
||||
return <h1>{props.name}</h1>
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Using element:
|
||||
|
||||
```jsx
|
||||
<my-element name='dntzhang' />
|
||||
```
|
||||
|
||||
You can also write expressions:
|
||||
|
||||
```jsx
|
||||
<h1>{user.age > 18 ? 'Adult' : 'Minor'}<h1>
|
||||
```
|
||||
|
||||
JSX can also be embedded in expressions:
|
||||
|
||||
```jsx
|
||||
<h1>{ user.age > 18 ? <div>Adult</div> : <div>Minor</div> }<h1>
|
||||
```
|
||||
|
||||
The above three elements are actually if else. If only if, you can:
|
||||
|
||||
```jsx
|
||||
<h1>{ user.age > 18 && <div>成年</div> }<h1>
|
||||
```
|
||||
|
||||
Powerful!
|
||||
|
||||
## List rendering
|
||||
|
||||
Datasource:
|
||||
|
||||
```js
|
||||
const arr = [{
|
||||
message: 'foo',
|
||||
}, {
|
||||
message: 'bar'
|
||||
}]
|
||||
```
|
||||
|
||||
JSX rendering:
|
||||
|
||||
```jsx
|
||||
<ul>
|
||||
{arr.map(item =>
|
||||
<li>{item.message}</li>
|
||||
)}
|
||||
</ul>
|
||||
```
|
||||
|
||||
Equate to:
|
||||
|
||||
```jsx
|
||||
<ul>
|
||||
{
|
||||
arr.map(item => {
|
||||
return <li>{item.message}</li>
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
```
|
||||
|
||||
If it's a `{}'package, you need `return'. If you need an index:
|
||||
|
||||
```jsx
|
||||
<ul>
|
||||
{arr.map((item, index) =>
|
||||
<li>{index}: {item.message}</li>
|
||||
)}
|
||||
</ul>
|
||||
```
|
||||
|
||||
## Comprehensive example
|
||||
|
||||
Here is a ninety-nine multiplication table:
|
||||
|
||||
```jsx
|
||||
import { define, render, WeElement } from 'omi'
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
|
||||
static css = `span{
|
||||
display: inline-block;
|
||||
width: 68px;
|
||||
}`
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<div>
|
||||
{props.numbers.map((a, indexA) =>
|
||||
<div>
|
||||
{
|
||||
props.numbers.map((b, indexB) => {
|
||||
return indexA <= indexB && <span>{a}*{b}={a * b} </span>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app numbers={[1, 2, 3, 4, 5, 6, 7, 8, 9]} />, 'body')
|
||||
```
|
||||
|
||||
Result display:
|
||||
|
||||
|
||||
|
||||
[→ Online Demo](https://tencent.github.io/omi/packages/omi/examples/99/)
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
## Lifecycle
|
||||
|
||||
| Lifecycle method | When it gets called |
|
||||
| ---------------- | -------------------------------------------- |
|
||||
| `install` | before the component gets mounted to the DOM |
|
||||
| `installed` | after the component gets mounted to the DOM |
|
||||
| `uninstall` | prior to removal from the DOM |
|
||||
| `beforeUpdate` | before update |
|
||||
| `updated` | after update |
|
||||
| `beforeRender` | before `render()` |
|
||||
| `receiveProps` | parent element re-render will trigger it |
|
||||
|
||||
For example:
|
||||
|
||||
```js
|
||||
import { render, WeElement, define } from 'omi'
|
||||
|
||||
define('my-timer', class extends WeElement {
|
||||
static observe = true
|
||||
|
||||
data = {
|
||||
seconds: 0
|
||||
}
|
||||
|
||||
tick() {
|
||||
this.data.seconds++
|
||||
}
|
||||
|
||||
install() {
|
||||
this.interval = setInterval(() => this.tick(), 1000)
|
||||
}
|
||||
|
||||
uninstall() {
|
||||
clearInterval(this.interval)
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div>Seconds: {this.data.seconds}</div>
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-timer />, 'body')
|
||||
```
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
# Omim
|
||||
|
||||
Cross-Frameworks components, powered by Material Design and [Omi](https://github.com/Tencent/omi).
|
||||
|
||||
* [DOCS & REPL](https://tencent.github.io/omi/packages/omim/docs/build/index.html)
|
||||
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
* Render by Custom Elements of Web Components
|
||||
* Any framework can use the components, such as Omi, React, Vue and Angular
|
||||
* Support both JSX and native HTML elements
|
||||
* Each element can be used independently
|
||||
* Super easy to change theme colors, fonts and rounded corners
|
||||
* Extended HTML capabilities, you can pass false attributes to elements through string `'0'` or string `'flase'`
|
||||
|
||||
## Usage
|
||||
|
||||
### Via script
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/omi"></script>
|
||||
<script src="https://unpkg.com/@omim/core@latest/button/index.js"></script>
|
||||
|
||||
<m-button>I am button</m-button>
|
||||
```
|
||||
|
||||
### Via npm
|
||||
|
||||
``` bash
|
||||
npm install @omim/core
|
||||
```
|
||||
|
||||
Then:
|
||||
|
||||
```js
|
||||
import '@omim/core/button'
|
||||
```
|
||||
|
||||
Then use the element in Omi, React, Vue or Angular:
|
||||
|
||||
``` html
|
||||
<m-button>I am button</m-button>
|
||||
```
|
||||
|
||||
It can also be used in pure js:
|
||||
|
||||
```js
|
||||
var button = document.createElement('m-button')
|
||||
button.innerHTML = 'I am button'
|
||||
document.body.append(button)
|
||||
button.addEventListener('click', function () {
|
||||
console.log('Clicked!')
|
||||
})
|
||||
|
||||
//or
|
||||
//document.body.innerHTML = '<m-button>I am button</m-button>'
|
||||
```
|
||||
|
||||
## Change Theme
|
||||
|
||||
```js
|
||||
document.body.style.setProperty('--mdc-theme-primary', 'red')
|
||||
document.body.style.setProperty('--mdc-theme-secondary', 'blue')
|
||||
document.body.style.setProperty('--mdc-shape-small-component-radius', '2px')
|
||||
```
|
||||
|
||||
All the config:
|
||||
|
||||
```
|
||||
--mdc-theme-primary: #0072d9;
|
||||
--mdc-theme-secondary: #2170b8;
|
||||
--mdc-theme-error: #f5222d;
|
||||
--mdc-theme-surface: #ffffff;
|
||||
--mdc-theme-on-primary: #ffffff;
|
||||
--mdc-theme-on-secondary: #ffffff;
|
||||
--mdc-theme-on-error: #ffffff;
|
||||
--mdc-theme-on-surface: #000000;
|
||||
--mdc-theme-background: #ffffff;
|
||||
--mdc-shape-small-component-radius: 4px;
|
||||
--mdc-shape-medium-component-radius: 4px;
|
||||
--mdc-shape-large-component-radius: 0px;
|
||||
--mdc-typography--font-family: Roboto, sans-serif;
|
||||
```
|
||||
|
||||
## HTML Extention
|
||||
|
||||
You can set boolean prop to false from markup by 0 or false string.
|
||||
|
||||
```js
|
||||
define('my-element', class extends WeElement {
|
||||
static defaultProps = {
|
||||
show: true
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
show: Boolean
|
||||
}
|
||||
|
||||
render(props) {
|
||||
...
|
||||
...
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Use:
|
||||
|
||||
```html
|
||||
<my-element show="false"></my-element>
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```html
|
||||
<my-element show="0"></my-element>
|
||||
```
|
||||
|
||||
## Contribution
|
||||
|
||||
### CMD
|
||||
|
||||
Build component:
|
||||
|
||||
```bash
|
||||
npm run build -- component-name
|
||||
```
|
||||
|
||||
Build all components:
|
||||
|
||||
```bash
|
||||
npm run build-all
|
||||
```
|
||||
|
||||
Build demo:
|
||||
|
||||
```bash
|
||||
npm start demo-name
|
||||
```
|
||||
|
||||
Publish:
|
||||
|
||||
```bash
|
||||
npm publish --access public
|
||||
```
|
||||
|
||||
### Links
|
||||
|
||||
* [material.io docs](https://material.io/develop/web/components/buttons/)
|
||||
* [material.io demo](https://material-components.github.io/material-components-web-catalog/#/)
|
||||
* [material-theme-builder](https://material-theme-builder.glitch.me/)
|
||||
* [material-components-web](https://github.com/material-components/material-components-web)
|
||||
* [material-icons](https://material.io/tools/icons/?style=baseline)
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
## Ecosystem of Omi
|
||||
|
||||
| **Project** | **Description** |
|
||||
| ------------------------------- | ----------------------------------- |
|
||||
| [omip](https://github.com/Tencent/omi/tree/master/packages/omip)| 直接使用 Omi 开发小程序或 H5 SPA！！！|
|
||||
| [omio](https://github.com/Tencent/omi/tree/master/packages/omio)| Omi for old browsers(IE8+ and mobile browsers).|
|
||||
| [omix](https://github.com/Tencent/omi/tree/master/packages/omix)| Tiny size mini programe framework.|
|
||||
| [omi-chart](https://github.com/Tencent/omi/tree/master/packages/omi-chart)| Simple HTML5 Charts using chart-x tag.|
|
||||
| [md2site](https://tencent.github.io/omi/assets/md2site/)| Static Site Generator with markdown powered by Omio.|
|
||||
| [omi-mvvm](https://github.com/Tencent/omi/blob/master/tutorial/omi-mvvm.md)| MVVM comes back bravely with [mappingjs](https://github.com/Tencent/omi/tree/master/packages/mappingjs) strong support.|
|
||||
| [omi-html](https://github.com/Tencent/omi/tree/master/packages/omi-html)| Using [htm](https://github.com/developit/htm) in omi.|
|
||||
| [omi-30-seconds](https://github.com/Tencent/omi/tree/master/packages/omi-30-seconds)| Useful Omi snippets that you can understand in 30 seconds.|
|
||||
| [omi-canvas](https://github.com/Tencent/omi/tree/master/packages/omi-canvas)| Perfect fusion of web components, jsx and canvas.|
|
||||
| [omi-mp](https://github.com/Tencent/omi/tree/master/packages/omi-mp)| Develop and generate Web HTML5 Single-Page Applications by wechat mini program. The output source is base on omi + [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router)|
|
||||
| [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router) |Omi official router in 1KB js. [→ DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/) |
|
||||
| [omi-devtools](https://github.com/f/omi-devtools)| Browser DevTools extension |
|
||||
| [omi-cli](https://github.com/Tencent/omi/tree/master/packages/omi-cli)| Project scaffolding |
|
||||
| [omi-swiper](https://github.com/loo41/Omi-Swiper)| Omi + Swiper |
|
||||
| [omi-vscode](https://github.com/ZainChen/omi-vscode)| Vscode extension for omi, [Install now!](https://marketplace.visualstudio.com/items?itemName=ZainChen.omi) |
|
||||
| [omi-ex](https://github.com/Tencent/omi/tree/master/packages/omi-ex)| Omi.js extension(TypeScript) |
|
||||
| [omi-transform](https://github.com/Tencent/omi/tree/master/packages/omi-transform)|Omi / [css3transform](https://tencent.github.io/omi/packages/omi-transform/css3transform/) integration. Made css3 transform super easy in your Omi project.|
|
||||
| [omi-tap](https://github.com/Tencent/omi/releases/tag/v4.0.24)| Native tap event support(omi v4.0.24+）|
|
||||
| [omi-finger](https://github.com/Tencent/omi/tree/master/packages/omi-finger)|Support touch and gesture events in your Omi project.|
|
||||
| [omi-touch](https://github.com/Tencent/omi/tree/master/packages/omi-touch)|Smooth scrolling, rotation, pull to refresh and any motion for the web.|
|
||||
| [omi-use](https://github.com/Tencent/omi/blob/master/docs/main-concepts.md#use)|React hooks like API|
|
||||
| [omi-native](https://github.com/Tencent/omi/tree/master/packages/omi-native)|Render web components to native|
|
||||
|[omi-i18n](https://github.com/i18next/omi-i18n)| Internationalization solution for omi.js using i18next ecosystem |
|
||||
| [omi-page](https://github.com/Tencent/omi/tree/master/packages/omi-page) |Tiny client-side router by [page](https://github.com/visionmedia/page.js)|
|
||||
|
||||
## Examples
|
||||
|
||||
* [→ Omi Examples](https://github.com/Tencent/omi/tree/master/packages/omi/examples)
|
||||
* [→ Omio Examples](https://github.com/Tencent/omi/tree/master/packages/omio/examples)
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
|
||||
## Props
|
||||
|
||||
Transfer data to sub elements through props, such as:
|
||||
|
||||
```jsx
|
||||
import { WeElement, define, render } from 'omi'
|
||||
|
||||
define('my-element', class extends WeElement {
|
||||
render(props) {
|
||||
return (
|
||||
<h1>Hello, {props.name}!</h1>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Using element:
|
||||
|
||||
```jsx
|
||||
<my-element name="world"></my-element>
|
||||
```
|
||||
|
||||
You can also pass any type of data to props:
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
render(props) {
|
||||
return (
|
||||
<h1>Hello, {props.myObj.name}!</h1>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Using element:
|
||||
|
||||
```jsx
|
||||
<my-element myObj={{ name: 'world' }}></my-element>
|
||||
```
|
||||
|
||||
You can set the default value by the `static defaultProps` property，use `static propTypes` to set the type:
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
static defaultProps = {
|
||||
name: 'Omi',
|
||||
myAge: 18
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
name: String,
|
||||
myAge: Number
|
||||
}
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<h1>Hello, {props.name}! Age {props.myAge}</h1>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Special attention should be paid to adding `static propTypes` if your custom elements want to be used directly in other frameworks or without frameworks. For example, it can be used directly in the body:
|
||||
|
||||
```html
|
||||
<body>
|
||||
<my-element name="dntzhang" my-age="20"></my-element>
|
||||
</body>
|
||||
```
|
||||
|
||||
### Once Props
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
install() {
|
||||
this.name = this.props.name
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<h1>Hello, {this.name}!</h1>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Next time the parent component updated and changed props, it will not affect the component.
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
## Ref
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
onClick = (evt) => {
|
||||
console.log(this.h1)
|
||||
}
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<div>
|
||||
<h1 ref={e => { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Add `ref = {e => {this. anyNameYouWant = e} ` to the element, and then you can access the element using `this. anyNameYouWant` in the JS code. You can improve the performance of update in two ways:
|
||||
|
||||
* Assignment ahead of time
|
||||
* createRef
|
||||
|
||||
### Assignment ahead of time
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
onClick = (evt) => {
|
||||
console.log(this.h1)
|
||||
}
|
||||
|
||||
myRef = e => { this.h1 = e }
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<div>
|
||||
<h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### createRef
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
onClick = (evt) => {
|
||||
console.log(this.myRef.current) //h1
|
||||
}
|
||||
|
||||
myRef = createRef()
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<div>
|
||||
<h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
# omi-router
|
||||
|
||||
omi-router is a router plugin of [Omi](http://omijs.org), and it is lightweight, easy and powerful to use. It is a solution to build Omi's SPA(Single Page Application).
|
||||
|
||||
[→ DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/)
|
||||
|
||||
The advantage of SPA is very clear.
|
||||
|
||||
* No refresh to load a content
|
||||
* No refresh to previous/forward page
|
||||
* Shareable link (Other can see the same page as you see)
|
||||
* No blank page and transmission animation
|
||||
* Reusable resource (If multi-page, same resource shold be loaded multi times)
|
||||
|
||||
Yes, there are many advantages. Let's do it.
|
||||
|
||||
## Install
|
||||
|
||||
### NPM
|
||||
|
||||
```js
|
||||
npm install omi-router
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
//You can visit route in the global context.
|
||||
import 'omi-router'
|
||||
import { define, WeElement, render } from 'omi'
|
||||
import './about'
|
||||
import './home'
|
||||
import './user'
|
||||
import './user-list'
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
static observe = true
|
||||
|
||||
data = { tag: 'my-home' }
|
||||
|
||||
install() {
|
||||
|
||||
route('/', () => {
|
||||
this.data.tag = 'my-home'
|
||||
})
|
||||
|
||||
route('/about', (evt) => {
|
||||
console.log(evt.query)
|
||||
this.data.tag = 'my-about'
|
||||
})
|
||||
|
||||
route('/user-list', () => {
|
||||
this.data.tag = 'user-list'
|
||||
})
|
||||
|
||||
route('/user/:name/category/:category', (evt) => {
|
||||
this.data.tag = 'my-user'
|
||||
this.data.params = evt.params
|
||||
})
|
||||
|
||||
route('*', function () {
|
||||
console.log('not found')
|
||||
})
|
||||
|
||||
route.before = (evt) => {
|
||||
console.log('before')
|
||||
//prevent route when return false
|
||||
//return false
|
||||
}
|
||||
|
||||
route.after = (evt) => {
|
||||
console.log('after')
|
||||
}
|
||||
}
|
||||
|
||||
onClick = () => {
|
||||
route.to('/user/vorshen/category/html')
|
||||
}
|
||||
|
||||
render(props, data) {
|
||||
return (
|
||||
<div>
|
||||
<ul>
|
||||
<li><a href="#/" >Home</a></li>
|
||||
<li><a href="#/about" >About</a></li>
|
||||
<li><a href="#/user-list" >UserList</a></li>
|
||||
<li><a href="#/about?name=dntzhang&age=18" >About Dntzhang</a></li>
|
||||
</ul>
|
||||
<div id="view">
|
||||
<data.tag params={data.params} />
|
||||
</div>
|
||||
<div><button onClick={this.onClick}>Test route.to</button></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, "#container")
|
||||
```
|
||||
|
||||
## Match
|
||||
|
||||
| Rule | Path | route.params |
|
||||
|---------|------|--------|
|
||||
| /user/:name | /user/dntzhang | `{ name: 'dntzhang' }` |
|
||||
| /user/:name/category/:category | /user/dntzhang/category/js | `{ name: 'dntzhang', category: 'js' }` |
|
||||
|
||||
Note: If hash is empty, it will be automatically recognized as `/` 。
|
||||
|
||||
## With Query Parameter
|
||||
|
||||
```html
|
||||
<li><a href="#/about?name=dntzhang&age=18" >About</a></li>
|
||||
```
|
||||
|
||||
```js
|
||||
route('/about', (evt) => {
|
||||
//output { name: 'dntzhang', age : '18' } when click the tag above
|
||||
console.log(evt.query)
|
||||
})
|
||||
```
|
||||
|
||||
## With Data
|
||||
|
||||
```js
|
||||
route.to('/about',(evt) => {
|
||||
//{ a: 1 }
|
||||
console.log(evt.data)
|
||||
})
|
||||
route.to('/about', { a: 1 })
|
||||
```
|
||||
|
||||
## Links
|
||||
|
||||
* [DEMO](https://tencent.github.io/omi/packages/omi-router/examples/simple/)
|
||||
* [Source](https://github.com/Tencent/omi/tree/master/packages/omi-router/examples/simple)
|
||||
|
||||
## License
|
||||
This content is released under the [MIT](http://opensource.org/licenses/MIT) License.
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
## Server-Side Rendering
|
||||
|
||||
Server-Side Rendering(SSR) has two advantages:
|
||||
|
||||
* Be friendly to SEO
|
||||
* Faster First Screen Display Time
|
||||
|
||||
Server-side rendering (SSR) also has drawbacks, such as increasing server-side overhead. Developers can weigh whether to use SSR or pre-render directly with [omi-snap](https://github.com/Tencent/omi/blob/master/tutorial/omi-snap.cn.md). Pre-rendering does not require additional server-side overhead and generates skeleton screen directly at the time of construction, so there is no dynamic data content. SSR can return HTML generated by dynamic data, and also the serialization data can be returned with HTML.
|
||||
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
$ npm i omi-cli -g # install cli
|
||||
$ omi init-s my-app # init project
|
||||
$ cd my-app
|
||||
$ npm start # develop
|
||||
$ npm run build # release
|
||||
```
|
||||
|
||||
## Principle
|
||||
|
||||
Define component:
|
||||
|
||||
```jsx
|
||||
import { WeElement, define } from 'omio'
|
||||
|
||||
define('my-element', class extends WeElement {
|
||||
install() {
|
||||
this.data = { liked: false }
|
||||
}
|
||||
|
||||
static css = 'button{ color: red; }'
|
||||
|
||||
render() {
|
||||
if (this.data.liked) {
|
||||
return 'You liked this.'
|
||||
}
|
||||
|
||||
return <button onClick={() => {
|
||||
this.data.liked = true
|
||||
this.update()
|
||||
}} >Like</button>
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Note that omio is used here, SSR can only use omio, not omi, because OMI is web components, node can not render web components.
|
||||
|
||||
> Both OMI and omio projects must use omio for SSR
|
||||
|
||||
Start a node server:
|
||||
|
||||
```jsx
|
||||
var express = require('express')
|
||||
var app = express()
|
||||
var Omi = require('omio')
|
||||
require('./my-element')
|
||||
|
||||
app.get('/', function (req, res) {
|
||||
const obj = Omi.renderToString(<my-element />)
|
||||
res.end(`<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Omi SSR</title>
|
||||
${toString(obj.css)}
|
||||
</head>
|
||||
<body>${obj.html}</body>
|
||||
</html>`)
|
||||
})
|
||||
|
||||
function toString(css){
|
||||
return (
|
||||
css.map(style => {
|
||||
return `<style id="${style.id}">${style.css}</style>`
|
||||
}
|
||||
))
|
||||
)
|
||||
}
|
||||
|
||||
app.listen(3000)
|
||||
```
|
||||
|
||||
Rendering HTML structure:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Omi SSR</title>
|
||||
<style type="text/css" id="_ss0">button[_ss0]{color:red;}</style>
|
||||
</head>
|
||||
<body><button _ss0>Like</button></body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Preview:
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
|
||||
## Update
|
||||
|
||||
`update` method is an important built-in core method for updating components themselves. For example:
|
||||
|
||||
```js
|
||||
this.update()
|
||||
```
|
||||
|
||||
You can also pass parameters to decide whether to ignore attributes in html mode and force updates:
|
||||
|
||||
```js
|
||||
this.update(true)
|
||||
```
|
||||
|
||||
For example, click on the mask of the pop-up layer to close the pop-up, pass it to the parent component in the react, let the parent component update, while Omi advocates self-update, so that the diff area is smaller.
|
||||
|
||||
```js
|
||||
onMaskClick = ()=> {
|
||||
//change props
|
||||
this.props.show = false
|
||||
//prevent parent component from updating diff without results
|
||||
this.prevProps.show = false
|
||||
//update self and ignore attributes in html mode
|
||||
this.update(true)
|
||||
//trigger events, which can be used to change external state variables to maintain consistency, but external components need not be updated
|
||||
this.fire('close')
|
||||
}
|
||||
```
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
## Class
|
||||
|
||||
Omi 有内置的两个 class 方法 `classNames` 和 `extractClass`：
|
||||
|
||||
```js
|
||||
import { classNames, extractClass } from 'omi'
|
||||
|
||||
define('my-element', class extends WeElement {
|
||||
render(props) {
|
||||
//extractClass 会取出 props 的 class 或 className 属性并与其他 classNames 合并在一起
|
||||
const cls = extractClass(props, 'o-my-class', {
|
||||
'other-class': true,
|
||||
'other-class-b': this.xxx === 1
|
||||
})
|
||||
|
||||
return (
|
||||
<div {...cls} {...props}>
|
||||
Test
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
上面的 `classNames` 和 npm 上的 [classNames](https://www.npmjs.com/package/classnames) 是一样的。
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
## CSS
|
||||
|
||||
这里说的是 props 的 css，而不是 `static css`，它提供了修改 shadow dom 内部 scoped style 的能力。
|
||||
|
||||
### 举个例子
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
static css = `h1{
|
||||
color: red;
|
||||
}`
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h1>Look at my color!<h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
上面的 `my-element` 的 h1 标签颜色是红色。有什么办法修改吗？
|
||||
|
||||
```jsx
|
||||
define('my-app', class extends WeElement {
|
||||
|
||||
myCSS = `
|
||||
h1{
|
||||
color: green;
|
||||
}`
|
||||
|
||||
onClick = () => {
|
||||
//动态修改
|
||||
this.myCSS = `
|
||||
h1{
|
||||
color: blue;
|
||||
}`
|
||||
this.update()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div onClick={this.onClick}>
|
||||
<my-element css={this.myCSS} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
而且还可以通过下面的方式保证一定能够修改：
|
||||
|
||||
```css
|
||||
color: blue!important;
|
||||
```
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
## Event
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
onClick = (evt) => {
|
||||
alert('Hello Omi!')
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<h1 onClick={this.onClick}>Hello, world!</h1>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### Custom Event
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
onClick = (evt) => {
|
||||
this.fire('myevent', { name: 'abc' })
|
||||
}
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<h1 onClick={this.onClick}>Hello, world!</h1>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
然后在你的自定义元素上绑定事件：
|
||||
|
||||
```jsx
|
||||
<my-element onMyEvent={(evt) => { alert(evt.detail.name) }}></my-element>
|
||||
```
|
||||
|
||||
通过 `this.fire` 触发自定义事件，fire 第一个参数是事件名称，第二个参数是传递的数据。通过 `evt.detail` 可以获取到传递的数据。
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
## 安装
|
||||
|
||||
直接下载并用 `<script>` 标签引入，Omi 会被注册为一个全局变量。
|
||||
|
||||
* [Omi 开发版本](https://unpkg.com/omi@latest/dist/omi.js)
|
||||
* [Omi 压缩版本](https://unpkg.com/omi@latest/dist/omi.min.js)
|
||||
|
||||
也可以通过 npm 安装
|
||||
|
||||
```bash
|
||||
npm i omi
|
||||
```
|
||||
|
||||
如果需要兼容 IE8+，可以选择 omio，它拥有和 omi 几乎一样的 API，且 Omi 也会被注册为一个全局变量。
|
||||
|
||||
* [Omio 开发版本](https://unpkg.com/omio@latest/dist/omi.js)
|
||||
* [Omio 压缩版本](https://unpkg.com/omi@latest/dist/omi.min.js)
|
||||
|
||||
或者
|
||||
|
||||
```bash
|
||||
npm i omio
|
||||
```
|
||||
|
||||
## 命令行工具
|
||||
|
||||
Omi 提供了官方的 CLI，你不需要去学习怎么配置 webpack、babel或者 TypeScript，CLI 帮你配置好了一切，且提供了各种模板满足不同的项目类型。
|
||||
|
||||
```bash
|
||||
$ npm i omi-cli -g # install cli
|
||||
$ omi init my-app # init project
|
||||
$ cd my-app
|
||||
$ npm start # develop
|
||||
$ npm run build # release
|
||||
```
|
||||
|
||||
> `npx omi-cli init my-app` 也是支持的(npm v5.2.0+).
|
||||
|
||||
目录描述:
|
||||
|
||||
```
|
||||
├─ 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
|
||||
```
|
||||
|
||||
|
||||
### npm 脚本
|
||||
|
||||
```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"
|
||||
}
|
||||
```
|
||||
|
||||
你也可以设置 PUBLIC_URL, 比如：
|
||||
|
||||
```json
|
||||
...
|
||||
"build": "PUBLIC_URL=https://your.url.com/sub node scripts/build.js",
|
||||
"build-windows": "set PUBLIC_URL=https://your.url.com/sub&& node scripts/build.js",
|
||||
...
|
||||
```
|
||||
|
||||
### 切换 omi 和 omio
|
||||
|
||||
增加或删除 package.json 里的 alias config 可以切换 omi 和 omio 渲染:
|
||||
|
||||
```js
|
||||
...
|
||||
"alias": {
|
||||
"omi": "omio"
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
|
||||
## 项目模板
|
||||
|
||||
| **Template Type**| **Command**| **Describe**|
|
||||
| ------------ | -----------| ----------------- |
|
||||
|基础模板(v3.3.0+)|`omi init my-app`| 基础模板，支持 omi 和 omio(IE8+)|
|
||||
|小程序模板(v3.3.5+)|`omi init-p my-app`| Omi 开发小程序 |
|
||||
|mps|`omi init-mps my-app`| 原生小程序增强框架(JSX + Less 输出 WXML + WXSS) |
|
||||
|mps ts 版本|`omi init-mps-ts my-app`| 原生小程序增强框架(JSX + Less 输出 WXML + WXSS) |
|
||||
|omi-cloud|`omi init-cloud my-app`| 小程序•云开发|
|
||||
|基础模板(v3.3.9+)|`omi init-o my-app`| 支持 IE8 的基础模板，只是 build 的时候支持 IE8，开发调试请用 IE9|
|
||||
|支持预渲染快照骨架的模板|`omi init-snap my-app`| 基础模板，支持 omi 和 omio(IE8+)，内置预渲染|
|
||||
|TypeScript 模板(omi-cli v3.3.0+)|`omi init-ts my-app`|使用 TypeScript 的模板|
|
||||
|Mobile 模板|`omi init-weui my-app`| 使用 weui 和 omi-router 的模板|
|
||||
|omi-mp 模板(omi-cli v3.0.13+)|`omi init-mp my-app` |使用微信小程序开发 H5|
|
||||
|MVVM 模板(omi-cli v3.0.22+)|`omi init-mvvm my-app` |MVVM 模板|
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
<!-- <p align="center"><img src="https://github.com/Tencent/omi/raw/master/assets/omi-logo2019.svg?sanitize=true" alt="omi" width="300"/></p>
|
||||
<h2 align="center">Omi - 下一代前端框架，去万物糟粕，合精华为一点点 JS</h2>
|
||||
<p align="center"><b>基于 Web Components 并支持 IE8+(omio) 和 小程序(omip)</b></p>
|
||||
-->
|
||||
|
||||
## Omi 是什么？
|
||||
|
||||
Omi (读音 /ˈomɪ/，类似于 欧米) 是下一代前端框架，基于 Web Components 设计，支持 PC Web、移动 H5 和小程序开发(One framework. Mobile & desktop & mini program)。
|
||||
|
||||
|
||||
<em> Omi looks really neat!<br> </em>
|
||||
— [Jason Miller (Creator of Preact)](https://twitter.com/_developit/)
|
||||
|
||||
<em> I really like the trend towards "frameworks" that:<br><br>"export default class WeElement extends HTMLElement {..}"<br> <br>This one, Omi, is from Tencent.</em>
|
||||
— [Dion Almaer](https://twitter.com/dalmaer/)
|
||||
|
||||
## 一个 HTML 完全上手
|
||||
|
||||
下面这个页面不需要任何构建工具就可以执行:
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/omi"></script>
|
||||
<script>
|
||||
const { define, WeElement, html, render } = Omi
|
||||
|
||||
define('my-counter', class extends WeElement {
|
||||
install() {
|
||||
this.data.count = 1
|
||||
this.sub = this.sub.bind(this)
|
||||
this.add = this.add.bind(this)
|
||||
}
|
||||
|
||||
sub() {
|
||||
this.data.count--
|
||||
this.update()
|
||||
}
|
||||
|
||||
add() {
|
||||
this.data.count++
|
||||
this.update()
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div>
|
||||
<button onClick=${this.sub}>-</button>
|
||||
<span>${this.data.count}</span>
|
||||
<button onClick=${this.add}>+</button>
|
||||
</div>
|
||||
`}
|
||||
})
|
||||
|
||||
render(html`<my-counter />`, 'body')
|
||||
</script>
|
||||
```
|
||||
|
||||
通过上面脚本的执行，你已经定义好了一个自定义标签，可以不使用 render 方法，直接使用 `my-counter` 标签：
|
||||
|
||||
```jsx
|
||||
<body>
|
||||
<my-counter></my-counter>
|
||||
</body>
|
||||
```
|
||||
|
||||
* [点击这里看执行结果](https://tencent.github.io/omi/assets/omi.html)
|
||||
|
||||
你可以使用 JSX 和 ES2015+ 来书写自定义元素:
|
||||
|
||||
|
||||
```jsx {8-11}
|
||||
import { render, WeElement, define } from 'omi'
|
||||
|
||||
define('my-counter', class extends WeElement {
|
||||
data = {
|
||||
count: 1
|
||||
}
|
||||
|
||||
static css = `
|
||||
span{
|
||||
color: red;
|
||||
}`
|
||||
|
||||
sub = () => {
|
||||
this.data.count--
|
||||
this.update()
|
||||
}
|
||||
|
||||
add = () => {
|
||||
this.data.count++
|
||||
this.update()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<button onClick={this.sub}>-</button>
|
||||
<span>{this.data.count}</span>
|
||||
<button onClick={this.add}>+</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-counter />, 'body')
|
||||
```
|
||||
|
||||
看上面高亮的部分，可以给组件加样式，比如上面的 span 的作用域仅仅在组件内部，不会污染别的组件。到现在你已经成功入门 Omi 了！你学会了:
|
||||
|
||||
* 为组件添加**结构**，如上面使用 JSX 书写结构
|
||||
* 为组件添加**行为**，如上面的 `onClick` 绑定事件
|
||||
* 为组件添加**样式**，如上面的 `static css`
|
||||
* 渲染组件到 body，当然也可以把组件渲染到任意其他组件
|
||||
|
||||
恭喜你！
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
## JSX
|
||||
|
||||
JSX 是目前为止开发体验最棒、语法噪音最少、表达能力最强且图灵完备的 UI 表达式，模板引擎不完备，模板字符串图灵完备但是语法噪音太大。即：
|
||||
|
||||
```js
|
||||
JSX > JS
|
||||
```
|
||||
|
||||
## Hello JSX
|
||||
|
||||
使用 JSX，可以在 JS 中书写闭合的 XML 标签来表达 DOM 结构等，比如:
|
||||
|
||||
```jsx
|
||||
const element = <h1>Hello, world!</h1>
|
||||
```
|
||||
|
||||
## 数据绑定
|
||||
|
||||
据绑定使用单括号将变量或表达式、或JS语句块包起来：
|
||||
|
||||
```jsx
|
||||
<h1>{user.name}</h1>
|
||||
```
|
||||
|
||||
在 Omi 的 render 里试试:
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
render(props) {
|
||||
return <h1>{props.name}</h1>
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
使用元素:
|
||||
|
||||
```jsx
|
||||
<my-element name='dntzhang' />
|
||||
```
|
||||
|
||||
还可以写表达式:
|
||||
|
||||
```jsx
|
||||
<h1>{user.age > 18 ? '成年' : '未成年'}<h1>
|
||||
```
|
||||
|
||||
表达式里也可以嵌入 JSX：
|
||||
|
||||
```jsx
|
||||
<h1>{ user.age > 18 ? <div>成年</div> : <div>未成年</div> }<h1>
|
||||
```
|
||||
|
||||
上面的三元其实就是 if else，如果仅仅需要 if，可以：
|
||||
|
||||
```jsx
|
||||
<h1>{ user.age > 18 && <div>成年</div> }<h1>
|
||||
```
|
||||
|
||||
强大！
|
||||
|
||||
## 列表渲染
|
||||
|
||||
数据源:
|
||||
|
||||
```js
|
||||
const arr = [{
|
||||
message: 'foo',
|
||||
}, {
|
||||
message: 'bar'
|
||||
}]
|
||||
```
|
||||
|
||||
JSX 渲染:
|
||||
|
||||
```jsx
|
||||
<ul>
|
||||
{arr.map(item =>
|
||||
<li>{item.message}</li>
|
||||
)}
|
||||
</ul>
|
||||
```
|
||||
|
||||
等同于:
|
||||
|
||||
```jsx
|
||||
<ul>
|
||||
{
|
||||
arr.map(item => {
|
||||
return <li>{item.message}</li>
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
```
|
||||
|
||||
如果是 `{}` 包裹，就需要 `return`。如果需要 index:
|
||||
|
||||
```jsx
|
||||
<ul>
|
||||
{arr.map((item, index) =>
|
||||
<li>{index}: {item.message}</li>
|
||||
)}
|
||||
</ul>
|
||||
```
|
||||
|
||||
## 综合例子
|
||||
|
||||
这里举一个九九乘法表:
|
||||
|
||||
```jsx
|
||||
import { define, render, WeElement } from 'omi'
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
|
||||
static css = `span{
|
||||
display: inline-block;
|
||||
width: 68px;
|
||||
}`
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<div>
|
||||
{props.numbers.map((a, indexA) =>
|
||||
<div>
|
||||
{
|
||||
props.numbers.map((b, indexB) => {
|
||||
return indexA <= indexB && <span>{a}*{b}={a * b} </span>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app numbers={[1, 2, 3, 4, 5, 6, 7, 8, 9]} />, 'body')
|
||||
```
|
||||
|
||||
结果展示:
|
||||
|
||||
|
||||
|
||||
[→ 在线查看](https://tencent.github.io/omi/packages/omi/examples/99/)
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
|
||||
### 生命周期
|
||||
|
||||
| Lifecycle method | When it gets called |
|
||||
| ---------------- | -------------------------------------------- |
|
||||
| `install` | 准备插入到文档 |
|
||||
| `installed` | 插入到文档之后 |
|
||||
| `uninstall` | 从文档中移除 |
|
||||
| `beforeUpdate` | update 之前 |
|
||||
| `updated` | update 之后 |
|
||||
| `beforeRender` | `render()` 之前 |
|
||||
| `receiveProps` | 父元素重新渲染触发 |
|
||||
|
||||
举个例子:
|
||||
|
||||
```js
|
||||
import { render, WeElement, define } from 'omi'
|
||||
|
||||
define('my-timer', class extends WeElement {
|
||||
data = {
|
||||
seconds: 0
|
||||
}
|
||||
|
||||
tick() {
|
||||
this.data.seconds++
|
||||
this.update()
|
||||
}
|
||||
|
||||
install() {
|
||||
this.interval = setInterval(() => this.tick(), 1000)
|
||||
}
|
||||
|
||||
uninstall() {
|
||||
clearInterval(this.interval)
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div>Seconds: {this.data.seconds}</div>
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-timer />, 'body')
|
||||
```
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
## mps
|
||||
|
||||
> 原生小程序插上 JSX 和 Less 的翅膀，**mp + sweet**
|
||||
|
||||
mps 是什么？为什么需要 mps？先列举几个现状:
|
||||
|
||||
* 目前小程序开发使用最多的技术依然是原生小程序
|
||||
* 原生小程序的 API 在不断完善和进化中
|
||||
* JSX 是表达能力和编程体验最好的 UI 表达式
|
||||
* JSX 可以表达一切想表达的 UI 结构也就能够描述任意 WXML
|
||||
|
||||
所以，就有了 mps，**mp + sweet**。 让开发者直接在原生小程序使用 JSX 写 WXML，用 Less 写 WXSS，实时编译，实时预览。
|
||||
|
||||
|
||||
|
||||
- JSX 代替 WXML 书写结构，精简高效
|
||||
- 对原生小程序零入侵
|
||||
- 支持 JS 和 TS
|
||||
- 实时编译，实时预览
|
||||
- 输出 WXML 自动美化
|
||||
|
||||
## 效果预览
|
||||
|
||||
|
||||
|
||||
## 立即开始
|
||||
|
||||
```bash
|
||||
$ npm i omi-cli -g
|
||||
$ omi init-mps my-app
|
||||
$ cd my-app
|
||||
$ npm start
|
||||
```
|
||||
|
||||
接着把小程序目录设置为 my-app 目录便可以愉快地开始开发调试了！
|
||||
|
||||
> `npx omi-cli init-mps my-app` 也支持(npm v5.2.0+)
|
||||
|
||||
生成的目录和官方的模板一致，只不过多了 JSX 文件，只需要修改 JSX 文件就会实时修改 WXML。
|
||||
|
||||
也支持 typescript:
|
||||
|
||||
```bash
|
||||
$ omi init-mps-ts my-app
|
||||
```
|
||||
|
||||
其他命令一样。
|
||||
|
||||
> `npx omi-cli init-mps-ts my-app` 也支持(npm v5.2.0+)
|
||||
|
||||
## JSX vs WXML
|
||||
|
||||
这里是一个真实的案例说明 JSX 的精巧高效的表达能力:
|
||||
|
||||
编译前的 JSX:
|
||||
|
||||
```jsx
|
||||
<view class='pre language-jsx'>
|
||||
<view class='code'>
|
||||
{tks.map(tk => {
|
||||
return tk.type === 'tag' ? <text class={'token ' + tk.type}>{
|
||||
tk.content.map(stk => {
|
||||
return stk.deep ? stk.content.map(sstk => {
|
||||
return <text class={'token ' + sstk.type}>{sstk.content || sstk}</text>
|
||||
}) : <text class={'token ' + stk.type}>{stk.content || stk}</text>
|
||||
})}</text> : <text class={'token ' + tk.type}>{tk.content || tk}</text>
|
||||
})}
|
||||
</view>
|
||||
</view>
|
||||
```
|
||||
|
||||
编译后 WXML:
|
||||
|
||||
```jsx
|
||||
<view class="pre language-jsx">
|
||||
<view class="code">
|
||||
<block wx:for="{{tks}}" wx:for-item="tk" wx:for-index="_anonIdx4">
|
||||
<block wx:if="{{tk.type === 'tag'}}"
|
||||
><text class="{{'token ' + tk.type}}"
|
||||
><block
|
||||
wx:for="{{tk.content}}"
|
||||
wx:for-item="stk"
|
||||
wx:for-index="_anonIdx2"
|
||||
><block wx:if="{{stk.deep}}"
|
||||
><text
|
||||
class="{{'token ' + sstk.type}}"
|
||||
wx:for="{{stk.content}}"
|
||||
wx:for-item="sstk"
|
||||
wx:for-index="_anonIdx3"
|
||||
>{{sstk.content || sstk}}</text
|
||||
>
|
||||
</block>
|
||||
<block wx:else
|
||||
><text class="{{'token ' + stk.type}}"
|
||||
>{{stk.content || stk}}</text
|
||||
>
|
||||
</block>
|
||||
</block>
|
||||
</text>
|
||||
</block>
|
||||
<block wx:else
|
||||
><text class="{{'token ' + tk.type}}">{{tk.content || tk}}</text>
|
||||
</block>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
```
|
||||
|
||||
## 老项目使用 mps
|
||||
|
||||
拷贝以下文件到小程序根目录:
|
||||
|
||||
* _scripts 目录所有文件
|
||||
* package.json
|
||||
* gulpfile.js
|
||||
|
||||
设置 project.config.json 里的 packOptions.ignore 忽略以上的文件，然后:
|
||||
|
||||
``` bash
|
||||
$ npm install
|
||||
$ npm start
|
||||
```
|
||||
|
||||
## mps 约定
|
||||
|
||||
公共的 less 文件必须放在 common-less 目录，@import 使用的时候不需要写路径。
|
||||
|
||||
## 推荐搭配
|
||||
|
||||
既然用了原生小程序的方案，所有可以轻松使用 mps + [omix](https://github.com/Tencent/omi/tree/master/packages/omix) 搭配一起使用。
|
||||
|
||||
欢迎使用 mps 大幅提高开发效率，Have fun!
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
# Omim
|
||||
|
||||
[Omi](https://github.com/Tencent/omi) 打造的 Material Design 框架无关标准组件，任意框架都可以使用。
|
||||
|
||||
|
||||
|
||||
## 特性
|
||||
|
||||
* 使用标准 Web Components 的 Custom Elements 渲染
|
||||
* 任意框架都可以使用这些组件(比如 Omi, React, Vue and Angular)
|
||||
* 同时支持 JSX 和 原生 HTML 标签的使用方式
|
||||
* 每个组件可以单独使用
|
||||
* 超级容易更换主题颜色、字体和圆角
|
||||
* 扩展了 HTML 能力，你可以通过字符串 `'0'` 或者字符串 `'false'` 传递 false 给元素
|
||||
|
||||
## 使用指南
|
||||
|
||||
### 通过 script
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/omi"></script>
|
||||
<script src="https://unpkg.com/@omim/core@latest/button/index.js"></script>
|
||||
|
||||
<m-button>I am button</m-button>
|
||||
```
|
||||
|
||||
### 通过 npm
|
||||
|
||||
``` bash
|
||||
npm install @omim/core
|
||||
```
|
||||
|
||||
Then:
|
||||
|
||||
```js
|
||||
import '@omim/core/button'
|
||||
```
|
||||
|
||||
然后在任意框架中使用，比如 Omi, React, Vue or Angular:
|
||||
|
||||
``` html
|
||||
<m-button>I am button</m-button>
|
||||
```
|
||||
|
||||
It can also be used in pure js:
|
||||
|
||||
```js
|
||||
var button = document.createElement('m-button')
|
||||
button.innerHTML = 'I am button'
|
||||
document.body.append(button)
|
||||
button.addEventListener('click', function () {
|
||||
console.log('Clicked!')
|
||||
})
|
||||
|
||||
//or
|
||||
//document.body.innerHTML = '<m-button>I am button</m-button>'
|
||||
```
|
||||
|
||||
## 更改主题
|
||||
|
||||
```js
|
||||
document.body.style.setProperty('--mdc-theme-primary', 'red')
|
||||
document.body.style.setProperty('--mdc-theme-secondary', 'blue')
|
||||
document.body.style.setProperty('--mdc-theme-error', 'yellow')
|
||||
```
|
||||
|
||||
所有配置如下:
|
||||
|
||||
```css
|
||||
--mdc-theme-primary: #0072d9;
|
||||
--mdc-theme-secondary: #2170b8;
|
||||
--mdc-theme-error: #f5222d;
|
||||
--mdc-theme-surface: #ffffff;
|
||||
--mdc-theme-on-primary: #ffffff;
|
||||
--mdc-theme-on-secondary: #ffffff;
|
||||
--mdc-theme-on-error: #ffffff;
|
||||
--mdc-theme-on-surface: #000000;
|
||||
--mdc-theme-background: #ffffff;
|
||||
--mdc-shape-small-component-radius: 4px;
|
||||
--mdc-shape-medium-component-radius: 4px;
|
||||
--mdc-shape-large-component-radius: 0px;
|
||||
--mdc-typography--font-family: Roboto, sans-serif;
|
||||
```
|
||||
|
||||
## HTML 扩展
|
||||
|
||||
当默认值为 true，需要传递 false 给 element 的时候，以前是历史难题，Omi 完美解决了这一点，你可以通过字符串 `'0'` 或者 字符串 `'false'` 来设置。
|
||||
|
||||
```js
|
||||
define('my-element', class extends WeElement {
|
||||
static defaultProps = {
|
||||
show: true
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
show: Boolean
|
||||
}
|
||||
|
||||
render(props) {
|
||||
...
|
||||
...
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Use:
|
||||
|
||||
```html
|
||||
<my-element show="false"></my-element>
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```html
|
||||
<my-element show="0"></my-element>
|
||||
```
|
||||
|
||||
## 贡献
|
||||
|
||||
### 一些命令
|
||||
|
||||
Build 组件:
|
||||
|
||||
```bash
|
||||
npm run build -- component-name
|
||||
```
|
||||
|
||||
Build 所有组件:
|
||||
|
||||
```bash
|
||||
npm run build-all
|
||||
```
|
||||
|
||||
Build 例子:
|
||||
|
||||
```bash
|
||||
npm start demo-name
|
||||
```
|
||||
|
||||
发布:
|
||||
|
||||
```bash
|
||||
npm publish --access public
|
||||
```
|
||||
|
||||
## 相关链接
|
||||
|
||||
* [material.io docs](https://material.io/develop/web/components/buttons/)
|
||||
* [material.io demo](https://material-components.github.io/material-components-web-catalog/#/)
|
||||
* [material-theme-builder](https://material-theme-builder.glitch.me/)
|
||||
* [material-components-web](https://github.com/material-components/material-components-web)
|
||||
|
|
@ -0,0 +1,189 @@
|
|||
## Omip
|
||||
|
||||
使用 Omi 开发小程序或 H5 SPA
|
||||
|
||||
> 现在，Omi 不仅仅可以开发桌面 Web、移动 H5，还可以直接开发小程序！
|
||||
|
||||
* Write Once, Run Anywhere
|
||||
* Learn Once, Write Anywhere
|
||||
|
||||
|
||||
|
||||
## Omip 特性
|
||||
|
||||
* 一次学习，多处开发，一次开发，多处运行
|
||||
* 使用 JSX，表达能力和编程体验大于模板
|
||||
* 支持使用 npm/yarn 安装管理第三方依赖
|
||||
* 支持使用 ES6+
|
||||
* 支持使用 CSS 预编译器
|
||||
* 小程序 API 优化，异步 API Promise 化
|
||||
* 超轻量的依赖包，顺从小程序标签和组件的设计
|
||||
|
||||
## 快速开始
|
||||
|
||||
```bash
|
||||
npm i omi-cli -g
|
||||
omi init-p my-app
|
||||
cd my-app
|
||||
npm start //开发小程序
|
||||
npm run dev:h5 //开发 h5
|
||||
npm run build:h5 //发布 h5
|
||||
```
|
||||
> node 版本要求 >= 8
|
||||
|
||||
> 也支持一条命令 `npx omi-cli init-p my-app` (npm v5.2.0+)
|
||||
|
||||
把小程序目录设置到 dist 目录就可以愉快地调试了！
|
||||
|
||||
也可以初始化 TypeScript 模板项目:
|
||||
|
||||
```js
|
||||
omi init-p-ts my-app
|
||||
```
|
||||
|
||||
> 也支持一条命令 `npx omi-cli init-p-ts my-app` (npm v5.2.0+)
|
||||
|
||||
## 代码示例
|
||||
|
||||
```jsx
|
||||
import { WeElement, define } from 'omi'
|
||||
import './index.css'
|
||||
|
||||
define('page-counter', class extends WeElement {
|
||||
config = {
|
||||
navigationBarTitleText: 'Counter'
|
||||
}
|
||||
|
||||
data = {
|
||||
count: 1
|
||||
}
|
||||
|
||||
sub = () => {
|
||||
this.data.count--
|
||||
this.update()
|
||||
}
|
||||
|
||||
add = () => {
|
||||
this.data.count++
|
||||
this.update()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<view>
|
||||
<button onClick={this.sub}>-</button>
|
||||
<text>{this.data.count}</text>
|
||||
<button onClick={this.add}>+</button>
|
||||
</view>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 扩展
|
||||
|
||||
`this.update` 方法可以传递最短路径，进行更新，比如下面两种写法是等价的。
|
||||
|
||||
```js
|
||||
this.update({
|
||||
count: 1
|
||||
})
|
||||
```
|
||||
|
||||
等价于:
|
||||
|
||||
```js
|
||||
this.data.count = 1
|
||||
this.update()
|
||||
```
|
||||
|
||||
也可以和 setData 一样传递 path:
|
||||
|
||||
```js
|
||||
this.update({
|
||||
'list[1].obj.name': 'Omip'
|
||||
})
|
||||
```
|
||||
|
||||
由于小程序视图更新是异步的，如果需要获取视图更新后的回调，可以使用第二个参数:
|
||||
|
||||
```js
|
||||
this.update({
|
||||
'list[1].obj.name': 'Omip'
|
||||
}, () => {
|
||||
console.log('更新完成')
|
||||
})
|
||||
```
|
||||
|
||||
或者只有一个参数，且该参数为函数:
|
||||
|
||||
```js
|
||||
this.update(() => {
|
||||
console.log('更新完成')
|
||||
})
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
在 JSX 或者一些要使用图片资源的 API，需要使用 import 或者 require 先导入图片再使用，不能直接使用相对地址！
|
||||
|
||||
如：
|
||||
|
||||
```js
|
||||
onShareAppMessage(){
|
||||
return {
|
||||
title: '分享标题',
|
||||
path: '/pages/index/index?id=123',
|
||||
imageUrl: require('./share.jpg'),
|
||||
success: (res) => {
|
||||
console.log("转发成功", res);
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log("转发失败", res);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
再比如:
|
||||
|
||||
```jsx
|
||||
import src from './my-image.png'
|
||||
...
|
||||
...
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<view>
|
||||
<image src={src}></image>
|
||||
</view>
|
||||
)
|
||||
}
|
||||
...
|
||||
...
|
||||
|
||||
```
|
||||
|
||||
## 获取最新的 omip 版本
|
||||
|
||||
你只需要重新拉去模板便可以更新到最新的 omip:
|
||||
|
||||
```
|
||||
omi init-p my-app
|
||||
```
|
||||
|
||||
## 实战案例
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
|
||||
MIT © dntzhang
|
||||
|
||||
#### Open Source Software Licensed Under the MIT License:
|
||||
|
||||
[tarojs](https://github.com/NervJS/taro) 1.2.13
|
||||
Copyright (c) 2019 O2Team
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
## Omi 生态
|
||||
|
||||
[→ Omi 生态学习路线图](https://github.com/Tencent/omi/tree/master/assets/rm.md)
|
||||
|
||||
| **项目** | **描述** |
|
||||
| ------------------------------- | ----------------------------------- |
|
||||
| [omip](https://github.com/Tencent/omi/tree/master/packages/omip)| 直接使用 Omi 开发小程序或 H5 SPA！！！|
|
||||
| [omio](https://github.com/Tencent/omi/tree/master/packages/omio)| 兼容老浏览器的 Omi 版本(支持到IE8+和移动端浏览器)。|
|
||||
| [omix](https://github.com/Tencent/omi/tree/master/packages/omix)| 极小却精巧的小程序框架。|
|
||||
| [omi-mp](https://github.com/Tencent/omi/tree/master/packages/omi-mp)| 通过微信小程序开发和生成 Web 单页应用(H5 SPA)|
|
||||
| [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router) |Omi 官方路由,超级小的尺寸，只有 1KB 的 js。[→ DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/)|
|
||||
| [md2site](https://tencent.github.io/omi/assets/md2site/)| 用 markdown 生成静态网站文档.|
|
||||
| [omi-mvvm](https://github.com/Tencent/omi/blob/master/tutorial/omi-mvvm.cn.md)| MVVM 王者归来, [mappingjs](https://github.com/Tencent/omi/tree/master/packages/mappingjs) 强力加持。|
|
||||
| [omi-chart](https://github.com/Tencent/omi/tree/master/packages/omi-chart)| 一个 chart-x 标签搞定报表|
|
||||
| [mp-mvvm](https://github.com/Tencent/omi/tree/master/packages/mp-mvvm)| 小程序插上 MVVM 的翅膀, [mappingjs](https://github.com/Tencent/omi/tree/master/packages/mappingjs) 强力加持。|
|
||||
| [omi-html](https://github.com/Tencent/omi/tree/master/packages/omi-html)| Using [htm](https://github.com/developit/htm) in omi.|
|
||||
| [omi-30-seconds](https://github.com/Tencent/omi/tree/master/packages/omi-30-seconds)| 30 秒理解一段有用的 Omi 代码片段.|
|
||||
| [omi-swiper](https://github.com/loo41/Omi-Swiper)| Omi + Swiper |
|
||||
| [omi-vscode](https://github.com/ZainChen/omi-vscode)| Vscode extension for omi, [Install now!](https://marketplace.visualstudio.com/items?itemName=ZainChen.omi) |
|
||||
| [omi-sprite](https://github.com/Tencent/omi/tree/master/packages/omi-sprite)| Web Components, JSX 和 Canvas 的完美融合|
|
||||
| [omi-canvas](https://github.com/Tencent/omi/tree/master/packages/omi-canvas)| Web Components, JSX 和 Canvas 的完美融合|
|
||||
| [omi-devtools](https://github.com/f/omi-devtools)| 谷歌浏览器开发工具扩展|
|
||||
| [omi-cli](https://github.com/Tencent/omi/tree/master/packages/omi-cli)| 项目脚手架工具，各种模板任你选。 |
|
||||
| [omi-ex](https://github.com/Tencent/omi/tree/master/packages/omi-ex)| Omi.js 扩展(TypeScript) |
|
||||
| [omi-transform](https://github.com/Tencent/omi/tree/master/packages/omi-transform)|Omi 和 [css3transform](https://tencent.github.io/omi/packages/omi-transform/css3transform/) 完美结合. 让 css3 transform 在你的 Omi项目中变得超级简单.|
|
||||
| [omi-tap](https://github.com/Tencent/omi/releases/tag/v4.0.24)| Omi 原生支持 tap 事件（omi v4.0.24+）|
|
||||
| [omi-finger](https://github.com/Tencent/omi/tree/master/packages/omi-finger)|Omi 官方手势库|
|
||||
| [omi-touch](https://github.com/Tencent/omi/tree/master/packages/omi-touch)|丝般顺滑的触摸运动|
|
||||
| [omi-snap](https://github.com/Tencent/omi/blob/master/tutorial/omi-snap.cn.md)|预渲染骨架屏|
|
||||
|[omi-i18n](https://github.com/i18next/omi-i18n)| Omi 国际化解决方案 |
|
||||
| [omi-page](https://github.com/Tencent/omi/tree/master/packages/omi-page) | 基于 [page.js](https://github.com/visionmedia/page.js) 的 Omi 路由|
|
||||
|
||||
## 一些例子
|
||||
|
||||
* [→ 一些 Omi 例子](https://github.com/Tencent/omi/tree/master/packages/omi/examples)
|
||||
* [→ 一些 Omio 例子](https://github.com/Tencent/omi/tree/master/packages/omio/examples)
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
|
||||
## Props
|
||||
|
||||
通过 Props 向子组件传递数据，比如：
|
||||
|
||||
```jsx
|
||||
import { WeElement, define, render } from 'omi'
|
||||
|
||||
define('my-element', class extends WeElement {
|
||||
render(props) {
|
||||
return (
|
||||
<h1>Hello, {props.name}!</h1>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
使用元素:
|
||||
|
||||
```jsx
|
||||
<my-element name="world"></my-element>
|
||||
```
|
||||
|
||||
你也可以传任意类型的数据给 props:
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
render(props) {
|
||||
return (
|
||||
<h1>Hello, {props.myObj.name}!</h1>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
使用元素:
|
||||
|
||||
```jsx
|
||||
<my-element myObj={{ name: 'world' }}></my-element>
|
||||
```
|
||||
|
||||
你可以通过静态属性 `static defaultProps` 来设置默认值，使用 `static propTypes` 来设置类型:
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
static defaultProps = {
|
||||
name: 'Omi',
|
||||
myAge: 18
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
name: String,
|
||||
myAge: Number
|
||||
}
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<h1>Hello, {props.name}! Age {props.myAge}</h1>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
需要特别注意，如果你的自定义元素想要直接在其他框架或者无框架的情况下原生使用，请一定要加上 `static propTypes` 才能生效。比如，这样就可以直接在 body 中使用:
|
||||
|
||||
```html
|
||||
<body>
|
||||
<my-element name="dntzhang" my-age="20"></my-element>
|
||||
</body>
|
||||
```
|
||||
|
||||
### 高级技巧
|
||||
|
||||
这里介绍一次性使用 prop 的技巧:
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
install() {
|
||||
this.name = this.props.name
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<h1>Hello, {this.name}!</h1>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
下次父组件 update 并且修改了 props 也不会影响到该组件。
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
## Ref
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
onClick = (evt) => {
|
||||
console.log(this.h1)
|
||||
}
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<div>
|
||||
<h1 ref={e => { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
在元素上添加 `ref={e => { this.anyNameYouWant = e }}` ，然后你就可以 JS 代码里使用 `this.anyNameYouWant` 访问该元素。你可以使用两种方式来提高 update 的性能：
|
||||
|
||||
* 提前赋值
|
||||
* createRef
|
||||
|
||||
### 提前赋值
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
onClick = (evt) => {
|
||||
console.log(this.h1)
|
||||
}
|
||||
|
||||
myRef = e => { this.h1 = e }
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<div>
|
||||
<h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### createRef
|
||||
|
||||
你也可以使用 `createRef` 来得到更高的性能:
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
onClick = (evt) => {
|
||||
console.log(this.myRef.current) //h1
|
||||
}
|
||||
|
||||
myRef = createRef()
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<div>
|
||||
<h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
# omi-router
|
||||
|
||||
omi-router 是 [Omi](http://omijs.org) 专属的router插件，文件尺寸轻量，使用简便，功能强大。用于Omi制作Web单页应用的首选解决方案。
|
||||
|
||||
[→ DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/)
|
||||
|
||||
单页的好处也是非常明显:
|
||||
|
||||
* 无刷新加载页面内容
|
||||
* 无刷新前进和后退页面
|
||||
* 路由中的某个链接的传播和分享（别人看到的和你一样的状态）
|
||||
* 转场动画（a标签跳转不仅要白屏，而且没有转场动画）
|
||||
* 资源复用（单页中的许多资源一定是可以共用的，最典型的比如omi.js，如果不是单页的话，你需要加载多次）
|
||||
|
||||
好了，好处这么多，看看怎么安装使用吧~~
|
||||
|
||||
## 安装
|
||||
|
||||
### NPM
|
||||
|
||||
```js
|
||||
npm install omi-router
|
||||
```
|
||||
|
||||
## 开始
|
||||
|
||||
```js
|
||||
//你可以在全局访问到 route
|
||||
import 'omi-router'
|
||||
import { define, WeElement, render } from 'omi'
|
||||
import './about'
|
||||
import './home'
|
||||
import './user'
|
||||
import './user-list'
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
static observe = true
|
||||
|
||||
data = { tag: 'my-home' }
|
||||
|
||||
install() {
|
||||
|
||||
route('/', () => {
|
||||
this.data.tag = 'my-home'
|
||||
})
|
||||
|
||||
route('/about', (evt) => {
|
||||
console.log(evt.query)
|
||||
this.data.tag = 'my-about'
|
||||
})
|
||||
|
||||
route('/user-list', () => {
|
||||
this.data.tag = 'user-list'
|
||||
})
|
||||
|
||||
route('/user/:name/category/:category', (evt) => {
|
||||
this.data.tag = 'my-user'
|
||||
this.data.params = evt.params
|
||||
})
|
||||
|
||||
route('*', function () {
|
||||
console.log('not found')
|
||||
})
|
||||
|
||||
route.before = (evt) => {
|
||||
console.log('before')
|
||||
//prevent route when return false
|
||||
//return false
|
||||
}
|
||||
|
||||
route.after = (evt) => {
|
||||
console.log('after')
|
||||
}
|
||||
}
|
||||
|
||||
onClick = () => {
|
||||
route.to('/user/vorshen/category/html')
|
||||
}
|
||||
|
||||
render(props, data) {
|
||||
return (
|
||||
<div>
|
||||
<ul>
|
||||
<li><a href="#/" >Home</a></li>
|
||||
<li><a href="#/about" >About</a></li>
|
||||
<li><a href="#/user-list" >UserList</a></li>
|
||||
<li><a href="#/about?name=dntzhang&age=18" >About Dntzhang</a></li>
|
||||
</ul>
|
||||
<div id="view">
|
||||
<data.tag params={data.params} />
|
||||
</div>
|
||||
<div><button onClick={this.onClick}>Test route.to</button></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, "#container")
|
||||
```
|
||||
|
||||
## 动态匹配
|
||||
|
||||
| 模式 | 匹配路径 | route.params |
|
||||
|---------|------|--------|
|
||||
| /user/:name | /user/dntzhang | `{ name: 'dntzhang' }` |
|
||||
| /user/:name/category/:category | /user/dntzhang/category/js | `{ name: 'dntzhang', category: 'js' }` |
|
||||
|
||||
注意： 如果 hash 为空，会自动被识别为 `/`。
|
||||
|
||||
## 另一种携带查询参数方法
|
||||
|
||||
```html
|
||||
<li><a href="#/about?name=dntzhang&age=18" >About</a></li>
|
||||
```
|
||||
|
||||
```js
|
||||
route('/about', (evt) => {
|
||||
//点击上面的标签会输出 { name: 'dntzhang', age : '18' }
|
||||
console.log(evt.query)
|
||||
})
|
||||
```
|
||||
|
||||
## 携带 JSON Data
|
||||
|
||||
```js
|
||||
route.to('/about',(evt) => {
|
||||
//{ a: 1 }
|
||||
console.log(evt.data)
|
||||
})
|
||||
route.to('/about', { a: 1 })
|
||||
```
|
||||
|
||||
### 地址
|
||||
|
||||
* [在线演示地址](https://tencent.github.io/omi/packages/omi-router/examples/simple/)
|
||||
* [源码地址](https://github.com/Tencent/omi/tree/master/packages/omi-router/examples/simple)
|
||||
|
||||
## License
|
||||
This content is released under the [MIT](http://opensource.org/licenses/MIT) License.
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
## 服务器端渲染
|
||||
|
||||
服务器端渲染英文叫 Server-Side Rendering，简称 SSR，有两大优势:
|
||||
|
||||
* 对 SEO 友好
|
||||
* 更快的首屏展示时间
|
||||
|
||||
用服务器端渲染 (SSR) 也有缺点，比如增加服务器端开销。开发者可以自行权衡是否使用 SSR，或者直接使用 [omi-snap](https://github.com/Tencent/omi/blob/master/tutorial/omi-snap.cn.md) 预渲染，预渲染不需要服务器端额外的开销，直接在构建时候无头浏览器生成骨架屏，所以也就没有动态数据内容，而 SSR 可以返回动态数据生成的HTML，还可以把数据序列化与 HTML 一同返回。
|
||||
|
||||
## 快速使用
|
||||
|
||||
```bash
|
||||
$ npm i omi-cli -g # 全局安装 cli
|
||||
$ omi init-s my-app # 初始化项目
|
||||
$ cd my-app
|
||||
$ npm start # 开发
|
||||
$ npm run build # 发布
|
||||
```
|
||||
|
||||
## 原理解析
|
||||
|
||||
定义组件：
|
||||
|
||||
```jsx
|
||||
import { WeElement, define } from 'omio'
|
||||
|
||||
define('my-element', class extends WeElement {
|
||||
install() {
|
||||
this.data = { liked: false }
|
||||
}
|
||||
|
||||
static css = 'button{ color: red; }'
|
||||
|
||||
render() {
|
||||
if (this.data.liked) {
|
||||
return 'You liked this.'
|
||||
}
|
||||
|
||||
return <button onClick={() => {
|
||||
this.data.liked = true
|
||||
this.update()
|
||||
}} >Like</button>
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
注意这里使用了 omio，SSR 只能使用 omio，而不能使用 omi，因为 omi 是 web components，node 无法渲染 web components。
|
||||
|
||||
> omi 和 omio 项目都必须使用 omio 进行 SSR
|
||||
|
||||
起个 node 服务器:
|
||||
|
||||
```jsx
|
||||
var express = require('express')
|
||||
var app = express()
|
||||
var Omi = require('omio')
|
||||
require('./my-element')
|
||||
|
||||
app.get('/', function (req, res) {
|
||||
const obj = Omi.renderToString(<my-element />)
|
||||
res.end(`<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Omi SSR</title>
|
||||
${toString(obj.css)}
|
||||
</head>
|
||||
<body>${obj.html}</body>
|
||||
</html>`)
|
||||
})
|
||||
|
||||
function toString(css){
|
||||
return (
|
||||
css.map(style => {
|
||||
return `<style id="${style.id}">${style.css}</style>`
|
||||
}
|
||||
))
|
||||
)
|
||||
}
|
||||
|
||||
app.listen(3000)
|
||||
```
|
||||
|
||||
直出的 HTML 结构:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Omi SSR</title>
|
||||
<style type="text/css" id="_ss0">button[_ss0]{color:red;}</style>
|
||||
</head>
|
||||
<body><button _ss0>Like</button></body>
|
||||
</html>
|
||||
```
|
||||
|
||||
显示效果:
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
|
||||
## Update
|
||||
|
||||
`update` 方法是内置的重要核心方法，用于更新组件自身。比如:
|
||||
|
||||
```js
|
||||
this.update()
|
||||
```
|
||||
|
||||
也可以传递参数，决定是否在 html 模式下忽略 attributes，强行更新:
|
||||
|
||||
```js
|
||||
this.update(true)
|
||||
```
|
||||
|
||||
举个场景，比如点击弹出层的 mask 关闭弹出，在 react 中需要传递给父组件，让父组件更新，而 Omi 推崇自更新，这样 diff 的区域更小。
|
||||
|
||||
```js
|
||||
onMaskClick = ()=> {
|
||||
//修改 props
|
||||
this.props.show = false
|
||||
//防止父组件更新 diff 不出结果
|
||||
this.prevProps.show = false
|
||||
//更新，并且在 html 模式下忽略 attributes
|
||||
this.update(true)
|
||||
//触发事件，可以通过这个更改外部的状态变量来保持一致性，但是外面的组件不用再更新
|
||||
this.fire('close')
|
||||
}
|
||||
```
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
.content{
|
||||
margin-top: 60px;
|
||||
margin-bottom: 30px;
|
||||
margin-left: 260px;
|
||||
padding: 1px 10px 10px 20px;
|
||||
color: #24292e;
|
||||
/* overflow: hidden; */
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
h3{
|
||||
color:#444444;
|
||||
}
|
||||
|
||||
pre{
|
||||
border: 1px solid #eee;
|
||||
width: 100%;
|
||||
}
|
||||
li{
|
||||
text-indent: 20px;
|
||||
list-style:disc inside ;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.content{
|
||||
margin-left: 0;
|
||||
border-left: none;
|
||||
padding: 1px 10px 10px 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
import { define, WeElement } from 'omi'
|
||||
import '../my-footer'
|
||||
|
||||
define('my-content', class extends WeElement {
|
||||
static css = require('./_index.css')
|
||||
|
||||
static use = [
|
||||
'html'
|
||||
]
|
||||
|
||||
install() {
|
||||
this.store.myContent = this
|
||||
}
|
||||
|
||||
installed() {
|
||||
this.initCodeStyle()
|
||||
}
|
||||
|
||||
afterUpdate() {
|
||||
this.initCodeStyle()
|
||||
}
|
||||
|
||||
touchEnd = () => {
|
||||
this.store.hideSidebar()
|
||||
}
|
||||
|
||||
initCodeStyle() {
|
||||
let codes = document.querySelectorAll('code')
|
||||
|
||||
let codesArr = Array.prototype.slice.call(codes);
|
||||
let codeHlNumArr = []
|
||||
codesArr.forEach(code => {
|
||||
let arr = code.className.match(/{([\S\s]*)}/)
|
||||
let pre = code.parentNode
|
||||
//bug!
|
||||
arr && pre.setAttribute('data-line', arr[1])
|
||||
if (code.className) {
|
||||
pre.className = code.className
|
||||
|
||||
const temp = code.className.match(/language-\w*/g)[0]
|
||||
if (temp) {
|
||||
code.innerHTML = Prism.highlight(code.innerText, Prism.languages[temp.split('-')[1]], temp.split('-')[1])
|
||||
}
|
||||
} else {
|
||||
let pre = code.parentNode
|
||||
code.className = 'language-markup'
|
||||
pre.className = 'language-markup'
|
||||
code.innerHTML = Prism.highlight(code.innerText, Prism.languages.markup, 'markup')
|
||||
}
|
||||
// let hllNums = null
|
||||
// if (arr) {
|
||||
// let numArr = arr[0].replace(/[{|}]/g, '').split(',')
|
||||
// hllNums = this._arrToNumber(numArr)
|
||||
// }
|
||||
//codeHlNumArr.push(hllNums)
|
||||
})
|
||||
|
||||
// codesArr.forEach((code, index) => {
|
||||
// let newP = document.createElement('div')
|
||||
// newP.className = '_code-ctn'
|
||||
// let pre = code.parentNode
|
||||
// let ctn = pre.parentNode
|
||||
// if (pre.nodeName === 'PRE') {
|
||||
// ctn.insertBefore(newP, pre)
|
||||
|
||||
// let hl = document.createElement('div')
|
||||
// hl.className = '_hl'
|
||||
// newP.appendChild(hl)
|
||||
// newP.appendChild(pre)
|
||||
// let nums = codeHlNumArr[index]
|
||||
|
||||
// let max = Math.max.apply(null, nums)
|
||||
|
||||
// let inner = ''
|
||||
// for (let i = 0; i <= max; i++) {
|
||||
// if (nums.indexOf(i) == -1) {
|
||||
// inner += '<br />'
|
||||
// } else {
|
||||
// inner += '<div class="_hll"></div>'
|
||||
// }
|
||||
// }
|
||||
// hl.innerHTML = inner
|
||||
// }
|
||||
// })
|
||||
//fix line-highlight
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
}
|
||||
|
||||
_arrToNumber(numArr) {
|
||||
let arr = []
|
||||
numArr.forEach(item => {
|
||||
if (item.indexOf('-') !== -1) {
|
||||
const tempArr = item.split('-')
|
||||
const begin = Number(tempArr[0])
|
||||
const end = Number(tempArr[1])
|
||||
for (let i = begin; i < end + 1; i++) {
|
||||
arr.push(i)
|
||||
}
|
||||
} else {
|
||||
arr.push(Number(item))
|
||||
}
|
||||
})
|
||||
return arr
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div class="content">
|
||||
<div
|
||||
ontouchend={this.touchEnd}
|
||||
dangerouslySetInnerHTML={{ __html: this.store.data.html }}
|
||||
/>
|
||||
<my-footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
iframe{
|
||||
width: 750px;
|
||||
height: 100%;
|
||||
top: 60px;
|
||||
right: 0;
|
||||
position: fixed;
|
||||
border: none;
|
||||
z-index: 9999;
|
||||
border-left: 2px solid #24292E;
|
||||
}
|
||||
|
||||
.switch{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #AA0000;
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
right: 50px;
|
||||
bottom: 50px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.switch img{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-top:5px;
|
||||
}
|
||||
|
||||
.switch.close img{
|
||||
margin-top:10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
iframe{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 478 B |
Binary file not shown.
|
After Width: | Height: | Size: 648 B |
|
|
@ -0,0 +1,53 @@
|
|||
import { define, WeElement } from 'omi'
|
||||
import css from './_index.css'
|
||||
|
||||
define('my-demo', class extends WeElement {
|
||||
install() {
|
||||
this.store.myDemo = this
|
||||
if(this.checkPc())
|
||||
this.show = true
|
||||
else
|
||||
this.show = false
|
||||
this.demo = this.store.demo
|
||||
}
|
||||
|
||||
css() {
|
||||
return css
|
||||
}
|
||||
|
||||
checkPc() {
|
||||
let userAgentInfo = navigator.userAgent
|
||||
let mp = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]
|
||||
for (let i = 0; i < mp.length; i++)
|
||||
if (userAgentInfo.indexOf(mp[i]) > 0)
|
||||
return false
|
||||
return true
|
||||
}
|
||||
|
||||
onShow = () => {
|
||||
this.show = true
|
||||
this.update()
|
||||
}
|
||||
|
||||
onClose = () => {
|
||||
this.show = false
|
||||
this.update()
|
||||
}
|
||||
|
||||
render() {
|
||||
if(!this.demo) return
|
||||
return (
|
||||
<div>
|
||||
{ this.show && <iframe style={`height:${window.innerHeight-59}px`} src={this.demo} ></iframe>}
|
||||
|
||||
{!this.show && <div class="switch code" onClick={this.onShow}>
|
||||
<img src={require('./code.png')}></img>
|
||||
</div>}
|
||||
|
||||
{this.show && <div class="switch close" onClick={this.onClose}>
|
||||
<img src={require('./close.png')}></img>
|
||||
</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
.ft{
|
||||
position: relative;
|
||||
margin-top: 20px
|
||||
}
|
||||
|
||||
.pre{
|
||||
position: absolute;
|
||||
left:15px;
|
||||
}
|
||||
|
||||
.next{
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue