mirror of https://github.com/alibaba/ice.git
feat: RML plugin (#160)
This commit is contained in:
许文涛
GitHub
parent
53b547e5f1
commit
ec5a1108ca
|
|
@ -0,0 +1,3 @@
|
|||
# rml with icejs
|
||||
|
||||
https://github.com/ice-lab/icejs/tree/master/examples
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"plugins": [
|
||||
"build-plugin-ice-rml"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"name": "example-basic-rml",
|
||||
"description": "rml with icejs",
|
||||
"dependencies": {
|
||||
"ice.js": "^1.0.0",
|
||||
"react": "^16.4.1",
|
||||
"react-dom": "^16.4.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^16.9.20",
|
||||
"@types/react-dom": "^16.9.5",
|
||||
"build-plugin-rml": "^1.1.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "icejs start",
|
||||
"build": "icejs build"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.0.0"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>RML Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="ice-container"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"template": "node",
|
||||
"container": {
|
||||
"port": 3333
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { createApp, IAppConfig } from 'ice';
|
||||
|
||||
const appConfig: IAppConfig = {
|
||||
};
|
||||
|
||||
createApp(appConfig);
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<script>
|
||||
import { useState, useCallback } from 'react';
|
||||
|
||||
export default function (props) {
|
||||
const [foo, setFoo] = useState(true);
|
||||
const handleClick = useCallback((evt) => {
|
||||
setFoo(!foo);
|
||||
}, [foo]);
|
||||
|
||||
return {
|
||||
color: 'yellow',
|
||||
handleClick,
|
||||
foo,
|
||||
fn: () => 'hello world',
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
.strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
:global {
|
||||
.container {
|
||||
background: grey;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div className=":container container">
|
||||
<div>
|
||||
<span>插值：</span>
|
||||
<span>{ "插值" }</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>字符串拼接：</span>
|
||||
<span>{ foo + '!!!' }</span>
|
||||
<span>{ `${foo}???` }</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>变量：</span>
|
||||
<span>{color}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>二元表达式：</span>
|
||||
<span>{foo && '你好'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>三元表达式：</span>
|
||||
<span>{foo ? '显示' : '不显示'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>表达式：</span>
|
||||
<span>{ fn(1) }</span >
|
||||
</div>
|
||||
<div>
|
||||
<span>样式：</span>
|
||||
<span className="strong">Class</span>，
|
||||
<span style={{"color": "yellow"}}>行内</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>属性表达式：</span>
|
||||
{/* <span style={{color: color}}>
|
||||
对象
|
||||
</span>*/}
|
||||
<span data-id={ foo ? color : 'undefined' }>
|
||||
计算
|
||||
</span>
|
||||
{/* <button type="primary" onClick={function() {
|
||||
alert(1);
|
||||
}}>
|
||||
点击
|
||||
</button> */}
|
||||
</div>
|
||||
<div>
|
||||
<button type="primary" onClick={handleClick}>
|
||||
切换
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<script>
|
||||
export default function() {
|
||||
return {};
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<import default="Simple" from="@/components/Simple/index.rml" />
|
||||
|
||||
<Simple />
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import Home from '@/pages/Home/index.rml';
|
||||
|
||||
export default [
|
||||
{
|
||||
path: '/',
|
||||
exact: true,
|
||||
component: Home
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
{
|
||||
"compileOnSave": false,
|
||||
"buildOnSave": false,
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"outDir": "build",
|
||||
"module": "esnext",
|
||||
"target": "es6",
|
||||
"jsx": "react",
|
||||
"moduleResolution": "node",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"lib": ["es6", "dom"],
|
||||
"sourceMap": true,
|
||||
"allowJs": true,
|
||||
"rootDir": "./",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noImplicitReturns": true,
|
||||
"noImplicitThis": true,
|
||||
"noImplicitAny": false,
|
||||
"importHelpers": true,
|
||||
"strictNullChecks": true,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"noUnusedLocals": true,
|
||||
"skipLibCheck": true,
|
||||
"paths": {
|
||||
"@/*": ["./src/*"],
|
||||
"ice": [".ice/index.ts"],
|
||||
"ice/*": [".ice/pages/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/*", ".ice", "src/components/Guide"],
|
||||
"exclude": ["node_modules", "build", "public"]
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
# plugin-ice-rml
|
||||
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"name": "build-plugin-rml",
|
||||
"version": "1.1.2",
|
||||
"description": "RML loader for icejs",
|
||||
"author": "ice-admin@alibaba-inc.com",
|
||||
"homepage": "",
|
||||
"license": "MIT",
|
||||
"main": "lib/index.js",
|
||||
"directories": {
|
||||
"lib": "lib",
|
||||
"test": "__tests__"
|
||||
},
|
||||
"files": [
|
||||
"lib"
|
||||
],
|
||||
"publishConfig": {
|
||||
"registry": "http://registry.npmjs.com/"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@gitlab.alibaba-inc.com:ice/ice.js.git"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: run tests from root\" && exit 1"
|
||||
},
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"@reactml/loader": "^0.1.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
module.exports = ({ onGetWebpackConfig }) => {
|
||||
onGetWebpackConfig((config) => {
|
||||
config.module
|
||||
.rule('compile')
|
||||
.test(/\.rml$/i)
|
||||
.use('rml')
|
||||
.loader('@reactml/loader')
|
||||
.options({
|
||||
renderer: 'react',
|
||||
});
|
||||
});
|
||||
};
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"extends": "../../tsconfig.settings.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"rootDir": "src",
|
||||
"outDir": "lib"
|
||||
},
|
||||
}
|
||||
|
|
@ -12,6 +12,7 @@
|
|||
{ "path": "packages/plugin-config" },
|
||||
{ "path": "packages/plugin-mpa" },
|
||||
{ "path": "packages/plugin-ssr" },
|
||||
{ "path": "packages/plugin-rml" },
|
||||
{ "path": "packages/create-ice" },
|
||||
{ "path": "packages/icejs" }
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in New Issue