3 |
4 |
6 |
7 |
20 |
--------------------------------------------------------------------------------
/tests/omil-components/Test.js:
--------------------------------------------------------------------------------
1 | import { Component as WeElement, createElement as h } from "react";
2 |
3 | function _defineProperty(obj, key, value) {
4 | if (key in obj) {
5 | Object.defineProperty(obj, key, {
6 | value: value,
7 | enumerable: true,
8 | configurable: true,
9 | writable: true
10 | });
11 | } else {
12 | obj[key] = value;
13 | }
14 |
15 | return obj;
16 | }
17 |
18 | class Header extends WeElement {
19 | render() {
20 | return h("div", null, this.name);
21 | }
22 |
23 | constructor() {
24 | _defineProperty(this, "name", 1);
25 | }
26 | }
27 |
28 | export default Header;
29 |
--------------------------------------------------------------------------------
/tests/omil-tests/t2.js:
--------------------------------------------------------------------------------
1 | var omil = require('../../libs')
2 | omil({
3 | type: 'extension',
4 | // file: 'html',
5 | options: null,
6 | source: `
7 |
8 | connect(
9 | {this.state.name}
5 |
10 |
11 |
12 |
14 | )
15 |
16 | `,
17 | callback(code) {
18 | console.log(code.allScript)
19 | }
20 | }).compileSass(`
21 | p{
22 | color:red;
23 | span{
24 | font-size:14px
25 | }
26 | }
27 | `).then((data) => {
28 | // console.log(data.text)
29 | });
--------------------------------------------------------------------------------
/libs/templates/styledcomponents/index.js:
--------------------------------------------------------------------------------
1 | // const cheerio = require('cheerio');
2 | module.exports = ({ style, template }) => {
3 | // console.log({ style, template })
4 | // console.log($('StyledComponents').html())
5 | if (style) {
6 | return template
7 | } else {
8 | // let $ = cheerio.load(template)
9 | // let html = $('StyledComponents').html()
10 | // console.log(html)
11 | template = template.replace(/\123
13 |
3 |
4 | ${this.data.title}
5 |
6 |
7 |
24 |
--------------------------------------------------------------------------------
/tests/omil-tests/t3.js:
--------------------------------------------------------------------------------
1 | var omil = require('../../libs')
2 | omil({
3 | type: 'extension',
4 | // file: 'html',
5 | options: null,
6 | source: `
7 |
8 | connect(
9 |
10 |
11 |
12 |
14 | )
15 |
16 |
22 | `,
23 | callback(code) {
24 | console.log(code.allScript)
25 | }
26 | }).compileSass(`
27 | p{
28 | color:red;
29 | span{
30 | font-size:14px
31 | }
32 | }
33 | `).then((data) => {
34 | // console.log(data.text)
35 | });
--------------------------------------------------------------------------------
/tests/omil-projects/src/components/oFileTest.omi:
--------------------------------------------------------------------------------
1 |
2 | 123
13 |
3 | 
4 |
6 |
7 |
24 |
--------------------------------------------------------------------------------
/tests/omil-projects/src/oApp.omi:
--------------------------------------------------------------------------------
1 |
2 | 123456
5 |
3 | {/*
9 |
10 |
30 |
--------------------------------------------------------------------------------
/libs/index.js:
--------------------------------------------------------------------------------
1 | const compileAll = require('./loaders/index')
2 | const path = require('path')
3 | const fs = require('fs')
4 |
5 | module.exports = function (source, map) {
6 | // use in omi-snippets
7 | if (typeof source === 'object') {
8 | const callback = (info, code, map) => {
9 | return code
10 | }
11 | const sourceObj = source
12 | const output = compileAll(sourceObj, source.options, source.callback)
13 | const compileSass = require('./styles/extension/index').compileSass
14 | return {
15 | compileSass,
16 | }
17 | } else {
18 | const callback = this.async()
19 | const sourceObj = {
20 | source
21 | }
22 | // use in webpack loader
23 | const {
24 | getOptions
25 | } = require('loader-utils')
26 | const options = getOptions(this) || {}
27 | const output = compileAll(sourceObj, options, callback)
28 | }
29 | };
--------------------------------------------------------------------------------
/libs/scripts/loader/transform.js:
--------------------------------------------------------------------------------
1 | const {
2 | transform
3 | } = require("@babel/core");
4 | module.exports = (code, options) => {
5 | return new Promise((resolve, reject) => {
6 | const defaultOption = {
7 | presets: [
8 | ["@babel/preset-env"],
9 | // [
10 | // "@babel/preset-react",
11 | // {
12 | // "pragma": "h",
13 | // }
14 | // ]
15 | ],
16 |
17 | }
18 | // comibine option
19 | const finalOptions = Object.assign({}, defaultOption, {
20 | ...options
21 | });
22 | // console.log(finalOptions)
23 | transform(code, {
24 | ...finalOptions
25 | }, (err, result) => {
26 | if (err) {
27 | reject(err)
28 | } else {
29 | // console.log(result)
30 | resolve(result)
31 | }
32 | });
33 | })
34 | }
--------------------------------------------------------------------------------
/tests/omil-components/Abc.eno:
--------------------------------------------------------------------------------
1 |
2 | hello world
3 |
4 |
24 |
--------------------------------------------------------------------------------
/libs/scripts/modules/define.js:
--------------------------------------------------------------------------------
1 | const {
2 | convertToCamelCase,
3 | captain,
4 | isCaptain
5 | } = require('../extension/convert')
6 |
7 | module.exports = (option) => {
8 | let {
9 | templateComponentName,
10 | script
11 | } = option
12 |
13 | if (templateComponentName) {
14 | const templateComponentCamelCaseName = captain(convertToCamelCase(templateComponentName))
15 | const isHoc = script.match(/export\s+default[\n\s\S]+?class[\s\w]*\{|module.exports\s*=[\n\s\S]*?class\s*\{/g)
16 | // hoc
17 | if (isHoc && isHoc[0].replace(/([\s\.\=])/g, "").length > 19) {
18 | return `
19 | // export default ${templateComponentCamelCaseName}
20 | `
21 | } else {
22 | switch (isCaptain(templateComponentName)) {
23 | case true:
24 | return `
25 | export default ${templateComponentCamelCaseName}
26 | `
27 | default:
28 |
29 | return `
30 | define('${templateComponentName}', ${templateComponentCamelCaseName});
31 | `
32 | }
33 | }
34 |
35 | } else {
36 | return ''
37 | }
38 | }
--------------------------------------------------------------------------------
/tests/omil-projects/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
27 |
--------------------------------------------------------------------------------
/libs/scripts/extension/transform.js:
--------------------------------------------------------------------------------
1 | const {
2 | transform,
3 | transformSync
4 | } = require("@babel/core");
5 | module.exports = (code, options) => {
6 | return new Promise((resolve, reject) => {
7 | // console.log(code,options)
8 | const defaultOption = {
9 | plugins: [
10 | require("@babel/plugin-proposal-class-properties")
11 | ],
12 | presets: [
13 | // [require('@babel/plugin-proposal-class-properties')],
14 | // [require("@babel/preset-env")],
15 | [
16 | require("@babel/preset-react"),
17 | {
18 | "pragma": "h",
19 | }
20 | ]
21 | ],
22 |
23 | }
24 | // comibine option
25 | const finalOptions = Object.assign({}, defaultOption, {
26 | ...options
27 | });
28 | // console.log(finalOptions)
29 | transform(code, {
30 | ...finalOptions
31 | }, (err, result) => {
32 | if (err) {
33 | reject(err)
34 | } else {
35 | // console.log(result)
36 | resolve(result)
37 | }
38 | });
39 | })
40 |
41 | }
--------------------------------------------------------------------------------
/tests/omil-tests/a.js:
--------------------------------------------------------------------------------
1 | var omil = require('../../libs')
2 | omil({
3 | type: 'extension',
4 | // file: 'html',
5 | options: null,
6 | source: `
7 |
8 |
9 |
10 |
11 |
13 |
14 |
50 | `,
51 | callback(code) {
52 | console.log(code.allScript)
53 | }
54 | }).compileSass(`
55 | p{
56 | color:red;
57 | span{
58 | font-size:14px
59 | }
60 | }
61 | `).then((data) => {
62 | // console.log(data.text)
63 | });
--------------------------------------------------------------------------------
/libs/utils/comments.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | deleteCodeComments(code) {
3 | // console.log(code)
4 | // return code.replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'|\/\*[\S\s]*?\*\/|\/(?:\\\/|[^\/\r\n])+\/(?=[^\/])|\/\/.*|\.\s*require|(?:^|[^$])\brequire\s*\(\s*(["'])(.+?)\1\s*\)/g, '\n')
5 | // return code.replace(/(?:^|\n|\r)\s*\/\*[\s\S]*?\*\/\s*(?:\r|\n|$)/g, '\n').replace(/(?:^|\n|\r)\s*\/\/.*(?:\r|\n|$)/g, '\n')
6 | // return code.replace(/(?:^|\n|\r)\s*\/\*[\s\S]*?\*\/\s*(?:\r|\n|$)/g, '\n').replace(/(|\n|\r)\s*\/\/.*(?:\r|\n|$)/g, '\n')
7 | // let noComment = code.replace(/(?:^|\n|\r)\s*\/\*[\s\S]*?\*\/\s*(?:\r|\n|$)/g, '\n')
8 | // let noComment2 = code.replace(/(?:^|\n|\r)\s*\/\/.*(?:\r|\n|$)/g, '\n');
9 | // console.log(noComment2)
10 | // return noComment
11 | let reg = /("([^\\\"]*(\\.)?)*")|('([^\\\']*(\\.)?)*')|(\/{2,}.*?(\r|\n))|(\/\*(\n|.)*?\*\/)/g;// 正则表达式
12 | return code.replace(reg, function (word) { // 去除注释后的文本
13 | return /^\/{2,}/.test(word) || /^\/\*/.test(word) ? "" : word;
14 | });
15 | }
16 | }
17 | // function deleteCodeComments(code) {
18 | // return code.replace(/(?:^|\n|\r)\s*\/\*[\s\S]*?\*\/\s*(?:\r|\n|$)/g, '\n').replace(/(?:^|\n|\r)\s*\/\/.*(?:\r|\n|$)/g, '\n')
19 | // }
20 | // let string = `
21 | // // abc
22 | // abc
23 | // cba
24 | // /*** 179283719
25 | // 213132*/
26 | // `
27 | // let result = deleteCodeComments(string)
28 | // console.log(result)
--------------------------------------------------------------------------------
/tests/omil-tests/t.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | 123
12 |
5 |
8 |
14 |
15 |
25 |
26 |
89 |
90 |
--------------------------------------------------------------------------------
/tests/omil-components/Login.eno:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 | Cancel
11 |
12 |
13 |
3 | 您好，请登陆
4 | {this.renderWn}
5 |
6 |
7 |
8 |
69 |
--------------------------------------------------------------------------------
/libs/scripts/modules/import.js:
--------------------------------------------------------------------------------
1 | const {
2 | isCaptain
3 | } = require('../extension/convert')
4 |
5 | module.exports = (option) => {
6 | const {
7 | script,
8 | isExistScript,
9 | scriptLang,
10 | template,
11 | templateLang,
12 | templateComponentName,
13 | templateFrameworkName,
14 | style,
15 | styleLang,
16 | isExistStyle,
17 | sourceObj
18 | } = option
19 | // console.log(style)
20 | const {
21 | file
22 | } = sourceObj
23 | switch (file) {
24 | case 'html':
25 | return `
26 | const {
27 | ${
28 | // register component
29 | 'WeElement,'
30 | }
31 | ${
32 | // when you use component, you should define
33 | templateComponentName ? 'define,' : ''
34 | }
35 | html,
36 | h,
37 | render
38 | } = omi;
39 | `
40 | break
41 | default:
42 | // console.log(isCaptain(templateComponentName))
43 | switch (isCaptain(templateComponentName)) {
44 | // A
45 | case true:
46 | return `
47 | import {
48 | ${
49 | // register component
50 | 'Component as WeElement,'
51 | }
52 | ${
53 | // JSX or HTML
54 | // html,
55 | // htm,
56 | templateLang === 'html' || templateLang === 'htm' ? 'html' : 'createElement as h'
57 | }
58 | } from '${
59 | // react , omi or rax
60 | templateFrameworkName ? templateFrameworkName : 'react'
61 | }';
62 | `
63 | // css
64 | +
65 | `
66 | ${style ? 'import styled from "styled-components"' : ''}
67 | `
68 | // + `
69 | // ${style ? 'const StyledComponents = styled.div`' + style + '`' : ''}
70 | // `
71 | // +
72 | // `
73 | // import {
74 | // ${
75 | // // when you use component, you should define
76 | // templateComponentName ? 'render,' : ''
77 | // }
78 | // ${
79 | // 'findDOMNode'
80 | // }
81 | // } from "react-dom"
82 | // `
83 | break;
84 | // a
85 | default:
86 | return `
87 | import {
88 | ${
89 | // register component
90 | 'WeElement,'
91 | }
92 | ${
93 | // when you use component, you should define
94 | templateComponentName ? 'define,' : ''
95 | }
96 | ${
97 | // JSX or HTML
98 | // html,
99 | // htm,
100 | templateLang === 'html' || templateLang === 'htm' ? 'html' : 'h'
101 | }
102 | } from '${
103 | // react , omi or rax
104 | templateFrameworkName ? templateFrameworkName : 'omi'
105 | }';
106 | `
107 | break;
108 | }
109 | }
110 |
111 | }
--------------------------------------------------------------------------------
/tests/omil-components/Login.js:
--------------------------------------------------------------------------------
1 | var _temp;
2 |
3 | import { Component as WeElement, createElement as h } from "react";
4 | import styled from "styled-components";
5 | import React from "react";
6 | import { Provider, connect } from "react-redux";
7 | import { withRouter } from "react-router";
8 | import store from "../../store/index";
9 | import { Form, Icon, Input, Button, Checkbox } from "antd";
10 | const StyledComponents = styled.div`
11 | .logBox {
12 | background: #fff;
13 | width: 76%;
14 | height: 20rem;
15 | position: absolute;
16 | left: 50%;
17 | top: 50%;
18 | transform: translate(-50%, -50%);
19 | }
20 | .logBox header {
21 | color: #000;
22 | text-align: center;
23 | line-height: 50px;
24 | }
25 | `;
26 | export default withRouter(
27 | Form.create({
28 | name: "normal_login"
29 | })(
30 | ((_temp = class Login extends WeElement {
31 | render() {
32 | return h(
33 | StyledComponents,
34 | null,
35 | h(
36 | "div",
37 | {
38 | className: "logBox"
39 | },
40 | h("header", null, "\u60A8\u597D\uFF0C\u8BF7\u767B\u9646"),
41 | this.renderWn
42 | )
43 | );
44 | }
45 |
46 | constructor(props) {
47 | super(props);
48 |
49 | this.handleSubmit = e => {
50 | e.preventDefault();
51 | this.props.form.validateFields((err, values) => {
52 | if (!err) {
53 | console.log("Received values of form: ", values);
54 | }
55 | });
56 | };
57 |
58 | console.log(props);
59 | const { getFieldDecorator } = this.props.form;
60 | }
61 |
62 | renderWn() {
63 | return h(
64 | Form,
65 | {
66 | onSubmit: this.handleSubmit,
67 | className: "login-form"
68 | },
69 | h(
70 | Form.Item,
71 | null,
72 | getFieldDecorator("username", {
73 | rules: [
74 | {
75 | required: true,
76 | message: "Please input your username!"
77 | }
78 | ]
79 | })(
80 | h(Input, {
81 | prefix: h(Icon, {
82 | type: "user",
83 | style: {
84 | color: "rgba(0,0,0,.25)"
85 | }
86 | }),
87 | placeholder: "Username"
88 | })
89 | )
90 | ),
91 | h(
92 | Form.Item,
93 | null,
94 | getFieldDecorator("password", {
95 | rules: [
96 | {
97 | required: true,
98 | message: "Please input your Password!"
99 | }
100 | ]
101 | })(
102 | h(Input, {
103 | prefix: h(Icon, {
104 | type: "lock",
105 | style: {
106 | color: "rgba(0,0,0,.25)"
107 | }
108 | }),
109 | type: "password",
110 | placeholder: "Password"
111 | })
112 | )
113 | ),
114 | h(
115 | Form.Item,
116 | null,
117 | getFieldDecorator("remember", {
118 | valuePropName: "checked",
119 | initialValue: true
120 | })(h(Checkbox, null, "Remember me")),
121 | h(
122 | "a",
123 | {
124 | className: "login-form-forgot",
125 | href: ""
126 | },
127 | "Forgot password"
128 | ),
129 | h(
130 | Button,
131 | {
132 | type: "primary",
133 | htmlType: "submit",
134 | className: "login-form-button"
135 | },
136 | "Log in"
137 | ),
138 | "Or ",
139 | h(
140 | "a",
141 | {
142 | href: ""
143 | },
144 | "register now!"
145 | )
146 | )
147 | );
148 | }
149 | }),
150 | _temp)
151 | )
152 | );
153 |
--------------------------------------------------------------------------------
/tests/omil-projects/src/components/oPanel.omi:
--------------------------------------------------------------------------------
1 |
2 |
3 |
13 |
14 |
58 |
--------------------------------------------------------------------------------
/tests/omil-projects/src/components/oSearch.omi:
--------------------------------------------------------------------------------
1 |
2 |
18 |
19 |
47 |
--------------------------------------------------------------------------------
/libs/loaders/index.js:
--------------------------------------------------------------------------------
1 | const compileStyle = require('../styles/index')
2 | const compileTemplate = require('../templates/index')
3 | const compileScript = require('../scripts/index')
4 |
5 | // const getModules = require('../utils/getModules')
6 | const modulesStart = require('../scripts/modules/import')
7 | const modulesEnd = require('../scripts/modules/export')
8 | const defineComponent = require('../scripts/modules/define')
9 | const renderComponent = require('../scripts/modules/render')
10 |
11 | // hander styled components
12 | const handleStyledComponents = require('../templates/styledcomponents')
13 |
14 | // handle ast
15 | const ast = require('../scripts/ast')
16 |
17 | // handle sass
18 | const compileSass = require('../styles/extension/index').compileSass
19 | const path = require('path')
20 | const compileAll = async (sourceObj, options, callback) => {
21 | // html
22 | let {
23 | template,
24 | templateLang,
25 | templateComponentName,
26 | templateFrameworkName
27 | } = html = compileTemplate(sourceObj)
28 | // css
29 | let {
30 | style,
31 | isExistStyle,
32 | styleLang,
33 | } = compileStyle(sourceObj)
34 |
35 | // console.log(style,styleLang)
36 | // sass and jsx
37 | // use in omi-snippets
38 | style = sourceObj.type === 'extension' && styleLang === 'scss' ? ((await compileSass(style)).text || '').replace(/[\r\n]/g, "") : style
39 | // js
40 | let {
41 | script,
42 | isExistScript,
43 | scriptType,
44 | scriptLang,
45 | // variable
46 | // style,
47 | // isExistStyle,
48 | // styleLang
49 | } = js = compileScript({
50 | ...sourceObj,
51 | style,
52 | styleLang,
53 | isExistStyle,
54 | templateComponentName
55 | })
56 | // console.log(template)
57 | // console.log(style)
58 | // console.log(script)
59 | // whether
4 | {this.renderNews()}
5 |
6 |
7 |
8 |
12 | 查看更多
9 |
10 |
11 |
47 |
261 |
262 |
263 |
264 |
--------------------------------------------------------------------------------
/README.EN.md:
--------------------------------------------------------------------------------
1 | English | [简体中文](./README.CN.md)
2 |
3 | # Install
4 |
5 | > Webpack loader for Omi Single-File Components
6 |
7 | You can use [npm](https://www.npmjs.com/package/omil) install or [git](https://github.com/Wscats/omil) clone it.
8 | ```bash
9 | npm install omil --save-dev
10 | # or
11 | npm install eno-loader --save-dev
12 | ```
13 | Configuration webpack file like this:
14 | ```js
15 | module: {
16 | rules: [{
17 | test: /\.omi|eno$/,
18 | use: [{
19 | loader: require.resolve('omil'),
20 | options: {
21 | // Use in development, You should remove in production
22 | sourceMaps: 'both',
23 | // Config babel plugins for async, await and other many features
24 | plugins: [
25 | [
26 | "@babel/plugin-transform-runtime",
27 | {
28 | "absoluteRuntime": false,
29 | "corejs": false,
30 | "helpers": true,
31 | "regenerator": true,
32 | "useESModules": false
33 | }
34 | ]
35 | ]
36 | }
37 | }],
38 | // Or you can use eno-loader or omil directly
39 | // use: ['eno-loader']
40 | // use: ['omil']
41 | }]
42 | }
43 | ```
44 | > [Loader Demo](https://wscats.github.io/omil/dist)
45 |
46 | ## Why Omil Or Eno Loader?
47 |
48 | `omil` is a loader for [webpack](https://webpack.js.org/) that allows you to author Omi components in a format called Single-File Components.
49 |
50 | ## Usage In Omi
51 |
52 | A `*.omi` file is a custom file format that uses HTML-like syntax to describe a Omi component. Each `*.omi` file consists of three types of top-level language blocks: `,
73 |
84 | ```
85 | > [Single-File Components Demo](https://github.com/Wscats/omil/blob/master/src/components/oHeader.omi)
86 |
87 | It also supports [JSX](https://github.com/facebook/jsx), if you want to do that, you only write `` without `lang="html"` attribute in your component like this:
88 | ```html
89 |
90 |
48 |
260 |
49 |
93 |
94 |
259 |
95 |
198 |
199 |
258 |
96 |
197 |
97 |
98 |
99 | 
100 |
101 |
104 |
109 |
110 |
111 |
149 |
150 |
151 |
152 |
166 |
167 |
168 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 | {this.state.title}
115 | 116 | 124 | 127 | ``` 128 | 129 | A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API. Here's a concrete example. 130 | ```html 131 | 132 |
133 |
135 |
136 |
170 |
176 | ```
177 |
178 | # Cooperate With TypeScript
179 |
180 | A static type system can help prevent many potential runtime errors, especially as applications grow. You can use `Single File Components(SFC)` cooperate with `Higher Order Components(HOC)` to get support with `TypeScript`
181 | ```html
182 |
183 | {this.state.title}
134 |{this.state.name}
47 |
240 |
241 |
242 |
243 |
--------------------------------------------------------------------------------
/docs/guide/public/home/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
48 |
239 |
49 |
93 |
94 |
238 |
95 |
177 |
178 |
237 |
96 |
176 |
97 |
98 |
99 |
100 |
101 |
104 |
109 |
110 |
111 |
149 |
150 |
151 |
152 |
154 |
155 |
165 |
166 |
167 | Omil 是什么？
omil是一个 webpack 的 loader，它允许你以一种名为单文件组件(SFCs)的格式撰写 Omi 组件：
1 | <template lang="html" name="component-name"> |
Omil 还提供了很多酷炫的特性：
156 |-
157 |
- 允许为 Omi 组件的每个部分使用其它的 webpack loader，例如在
<style>的部分使用 Sass 和在<template>的部分使用 jsx；
158 | - 允许在一个 .omi 文件中使用自定义块，并对其运用自定义的 loader 链； 159 |
- 使用 webpack loader 将
<style>和<template>中引用的资源当作模块依赖来处理；
160 | - 在开发过程中使用热重载来保持状态。 161 |
简而言之，webpack 和 Omi Loader 的结合为你提供了一个现代、灵活且极其强大的前端工作流，来帮助撰写 Omi.js 应用。
163 | 164 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
47 |
240 |
241 |
242 |
243 |
--------------------------------------------------------------------------------
/libs/scripts/ast/index.js:
--------------------------------------------------------------------------------
1 | const {
2 | transform
3 | } = require("@babel/core");
4 |
5 | // const t = require("@babel/types");
6 | module.exports = (option, options) => {
7 | let {
8 | script,
9 | allScript,
10 | isExistScript,
11 | scriptType,
12 | scriptLang,
13 | template,
14 | templateLang,
15 | templateComponentName,
16 | style,
17 | styleLang,
18 | isExistStyle
19 | } = option
20 | // console.log(option)
21 | return new Promise((resolve, reject) => {
22 | // console.log(allScript)
23 | let presets = [
24 | [
25 | require("@babel/preset-react"),
26 | {
27 | "pragma": "h",
28 | },
29 | ]
30 | ]
31 |
32 | if (scriptType === 'text/babel') {
33 | presets.push(require("@babel/preset-env"))
34 | }
35 | // console.log(presets)
36 | const defaultOption = {
37 | plugins: [
38 | [require("@babel/plugin-proposal-class-properties"),
39 | { "loose": true },
40 | ],
41 | {
42 | visitor: {
43 | "ClassExpression"(path, { opts }) {
44 | // 筛选class myAbcAbc extends WeElement
45 | if (path.node.superClass && path.node.superClass.name === 'WeElement') {
46 | // console.log('------------------------ClassExpression-----------------------')
47 | // console.log(path.get("body.body"))
48 | let ClassMethods = [];
49 | path.get("body.body").forEach((ClassMethod) => {
50 | // 筛选render() {}
51 | if (ClassMethod.node.key.name === 'render') {
52 | // console.log(ClassMethod.type)
53 | ClassMethods.push(ClassMethod)
54 | // ClassMethod.remove()
55 | // 删除所有css() {}
56 | } else if (ClassMethod.node.key.name === 'css') {
57 | ClassMethod.remove()
58 | }
59 | })
60 | // 获取最后一个render函数
61 | let lastRenderFn = ClassMethods[ClassMethods.length - 1];
62 | // 删除除第一个以外的其他render
63 | if (ClassMethods) {
64 | for (let i = 0; i < ClassMethods.length; i++) {
65 | if (i != 0) {
66 | ClassMethods[i].remove()
67 | }
68 | }
69 | }
70 | if (lastRenderFn) {
71 | // lastRenderFn.replaceWithMultiple([
72 | // t.expressionStatement(t.stringLiteral("Is this the real life?")),
73 | // t.expressionStatement(t.stringLiteral("Is this just fantasy?")),
74 | // t.expressionStatement(t.stringLiteral("(Enjoy singing the rest of the song in your head)")),
75 | // ])
76 | // lastRenderFn.remove();
77 | // console.log(t);
78 | // lastRenderFn.get("body.body").remove()
79 | // path.find((path) => path.isReturnStatement());
80 | // 寻找return的地方
81 | // let returnStatement = lastRenderFn.get("body.body").find((path) => path.isReturnStatement());
82 | // console.log(returnStatement)
83 | // returnStatement.replaceWithMultiple([
84 | // // lastRenderFn,
85 | // // template
86 | // // t.returnStatement(t.jsxEmptyExpression())
87 | // t.expressionStatement(t.stringLiteral("Is this the real life?")),
88 | // // t.expressionStatement(t.stringLiteral("Is this just fantasy?")),
89 | // // t.expressionStatement(t.stringLiteral("(Enjoy singing the rest of the song in your head)")),
90 | // ])
91 | // console.log({
92 | // ...returnStatement
93 | // })
94 | // console.log(returnStatement)
95 | // console.log(lastRenderFn.node.body)
96 | // returnStatement.getCode
97 | // returnStatement.insertAfter(t.blockStatement([returnStatement]))
98 | // console.log(lastRenderFn.get("body.body"));
99 | }
100 | }
101 |
102 | },
103 | // "ClassExpression"(path) {
104 | // console.log(path)
105 | // },
106 | "ImportDeclaration"(path) {
107 | if (scriptType === 'module') {
108 | path.remove()
109 | }
110 | },
111 | "ClassDeclaration"(path) {
112 | // console.log('-----------------------ClassDeclaration------------------------')
113 | // console.log(path)
114 | // 筛选class myAbcAbc extends WeElement
115 | if (path.node.superClass.name === 'WeElement') {
116 | // console.log(path.get("body.body"))
117 | let ClassMethods = [];
118 | path.get("body.body").forEach((ClassMethod) => {
119 | // 筛选render() {}
120 | if (ClassMethod.node.key.name === 'render') {
121 | // console.log(ClassMethod.type)
122 | ClassMethods.push(ClassMethod)
123 | // ClassMethod.remove()
124 | // 删除所有css() {}
125 | } else if (ClassMethod.node.key.name === 'css') {
126 | ClassMethod.remove()
127 | }
128 | })
129 | // 获取最后一个render函数
130 | // let lastRenderFn = ClassMethods[ClassMethods.length - 1];
131 | // 删除除第一个以外的其他render
132 | if (ClassMethods) {
133 | for (let i = 0; i < ClassMethods.length; i++) {
134 | if (i != 0) {
135 | ClassMethods[i].remove()
136 | }
137 | }
138 | }
139 | // let returnStatement = lastRenderFn.get("body.body").find((path) => path.isReturnStatement());
140 | // console.log(lastRenderFn.get("body"))
141 | // returnStatement.replaceWithMultiple([
142 | // // lastRenderFn,
143 | // // template
144 | // // t.returnStatement(t.jsxEmptyExpression())
145 | // t.expressionStatement(t.stringLiteral("Is this the real life?")),
146 | // // t.expressionStatement(t.stringLiteral("Is this just fantasy?")),
147 | // // t.expressionStatement(t.stringLiteral("(Enjoy singing the rest of the song in your head)")),
148 | // ])
149 | }
150 | }
151 | }
152 | }
153 | ],
154 | comments: false,
155 | presets
156 | // :[
157 | // require("@babel/preset-react"),
158 | // [
159 | // {
160 | // "pragma": "h",
161 | // },
162 | // ]
163 | // ]
164 |
165 | }
166 | // comibine option
167 | const finalOptions = Object.assign({}, defaultOption, {
168 | ...options
169 | });
170 | // console.log(finalOptions)
171 | transform(allScript, {
172 | ...finalOptions
173 | }, (err, result) => {
174 | if (err) {
175 | reject(err)
176 | } else {
177 | // console.log(result.code)
178 | resolve(result)
179 | }
180 | });
181 | })
182 | // console.log(result.code)
183 | // return result
184 | }
--------------------------------------------------------------------------------
/docs/guide/public/css/book.css:
--------------------------------------------------------------------------------
1 | .container {
2 | height: 100%; }
3 |
4 | .columns {
5 | height: 100%; }
6 |
7 | html, body {
8 | height: 100%;
9 | margin: 0; }
10 |
11 | a {
12 | color: #004ed0; }
13 |
14 | a:hover {
15 | color: #6d6d6d;
16 | text-decoration: none; }
17 |
18 | img {
19 | max-width: 100%;
20 | max-height: 100%; }
21 |
22 | .book-container {
23 | height: 100%;
24 | font-family: 'Noto Sans TC', sans-serif; }
25 | @media all and (min-width: 960px) {
26 | .book-container {
27 | padding: 1rem 2rem; } }
28 | @media all and (max-width: 959px) {
29 | .book-container {
30 | padding: 0 1rem; } }
31 |
32 | .book-content a {
33 | color: #004ed0; }
34 |
35 | .book-content a:hover {
36 | color: #6d6d6d; }
37 |
38 | .book-content {
39 | margin-top: 0.5rem;
40 | margin-left: 0.5rem; }
41 |
42 | .home-post-title h3 {
43 | font-size: 1rem;
44 | color: #004ed0; }
45 |
46 | .home-post-excerpt {
47 | font-size: 14px;
48 | color: #858585; }
49 |
50 | .book-navbar {
51 | padding: 0.75rem 0; }
52 | @media all and (min-width: 960px) {
53 | .book-navbar {
54 | display: none; } }
55 | @media all and (max-width: 959px) {
56 | .book-navbar {
57 | display: block; } }
58 | .book-navbar ul {
59 | list-style: none;
60 | margin: 0; }
61 | .book-navbar ul ul {
62 | margin: 0 0 0 .5rem; }
63 | .book-navbar .navbar-icon {
64 | width: 25px; }
65 | .book-navbar .accordion-body {
66 | margin: 0.375rem 0; }
67 |
68 | .book-post {
69 | max-width: 95%; }
70 | .book-post .book-post-title {
71 | font-size: 2rem; }
72 | .book-post .book-post-metadata {
73 | padding: 0.75rem 0 1rem 0;
74 | font-size: 14px;
75 | font-weight: bold; }
76 | .book-post a:hover {
77 | text-decoration: underline; }
78 | .book-post h1, .book-post h2, .book-post h3, .book-post h4, .book-post h5, .book-post h6 {
79 | font-weight: bold;
80 | padding-bottom: 0.625rem;
81 | margin-bottom: 1rem;
82 | border-bottom: 1px solid #ddd; }
83 | .book-post h2, .book-post h3, .book-post h4, .book-post h5, .book-post h6 {
84 | margin-top: 1.25rem; }
85 | .book-post h1 {
86 | font-size: 1.5rem; }
87 | .book-post h2 {
88 | font-size: 1.375rem; }
89 | .book-post h3 {
90 | font-size: 1.25rem; }
91 | .book-post h4 {
92 | font-size: 1.125rem; }
93 | .book-post h5 {
94 | font-size: 1rem; }
95 | .book-post h6 {
96 | font-size: 0.875rem; }
97 | .book-post p {
98 | font-size: 16px;
99 | margin-bottom: 0.625rem; }
100 | .book-post hr {
101 | border: 0.5px solid #ddd;
102 | background-color: #ddd;
103 | margin: 1rem 0; }
104 | .book-post .table-wrapper {
105 | max-width: 100%;
106 | margin: 1.5rem 0;
107 | overflow: auto; }
108 | .book-post .table-wrapper table {
109 | width: 100%; }
110 | .book-post .table-wrapper table th, .book-post .table-wrapper table td {
111 | padding: 0.75rem;
112 | border-top: 1px solid #ddd;
113 | text-align: left; }
114 | .book-post ul ol, .book-post ol ol {
115 | margin-top: 0;
116 | margin-bottom: 0; }
117 | .book-post ul ul, .book-post ol ul {
118 | margin-top: 0;
119 | margin-bottom: 0; }
120 | .book-post li {
121 | margin-top: .4rem;
122 | margin-bottom: .4rem; }
123 | .book-post blockquote p:last-child {
124 | margin-top: 0;
125 | margin-bottom: 0; }
126 | .book-post .video-container {
127 | position: relative;
128 | margin-bottom: 1.5rem;
129 | padding-bottom: 56.25%;
130 | height: 0;
131 | overflow: hidden; }
132 | .book-post .video-container iframe {
133 | position: absolute;
134 | width: 100%;
135 | height: 100%;
136 | top: 0;
137 | left: 0; }
138 | .book-post a.gallery-item:hover {
139 | text-decoration: none; }
140 | .book-post figcaption {
141 | text-align: center;
142 | font-size: 0.75rem;
143 | color: #282828; }
144 | .book-post img {
145 | display: block;
146 | margin-left: auto;
147 | margin-right: auto; }
148 | .book-post figure.highlight {
149 | margin: 24px 0;
150 | padding: 0;
151 | border-radius: 4px;
152 | box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
153 | position: relative;
154 | overflow: auto; }
155 | .book-post figure.highlight pre {
156 | font-size: 13px;
157 | line-height: 22px; }
158 | .book-post figure.highlight .gutter {
159 | padding: 10px 6px 10px 14px; }
160 | .book-post figure.highlight .gutter pre {
161 | margin: 0;
162 | text-align: right;
163 | color: #b8b8b8;
164 | -webkit-user-select: none;
165 | -khtml-user-select: none;
166 | -moz-user-select: none;
167 | -ms-user-select: none;
168 | user-select: none; }
169 | .book-post figure.highlight .code {
170 | padding: 10px; }
171 | .book-post figure.highlight .code pre {
172 | margin: 0;
173 | padding-left: 0; }
174 | .book-post figure.highlight table {
175 | margin: 0; }
176 | .book-post figure.highlight table tbody {
177 | display: block;
178 | margin: 0; }
179 | .book-post figure.highlight table tbody tr td {
180 | border: none; }
181 | .book-post figure.highlight figcaption {
182 | background-color: #21252b;
183 | padding: 9px;
184 | font-size: 15px;
185 | color: white;
186 | user-select: none;
187 | text-align: center; }
188 | .book-post figure.highlight figcaption ::after {
189 | content: " ";
190 | position: absolute;
191 | -webkit-border-radius: 50%;
192 | border-radius: 50%;
193 | background: #fc625d;
194 | width: 11px;
195 | height: 11px;
196 | top: 14px;
197 | left: 16px;
198 | -webkit-box-shadow: 24px 0px #fdbc40, 40px 0px #35cd4b;
199 | box-shadow: 20px 0px #fdbc40, 40px 0px #35cd4b;
200 | z-index: 3; }
201 | .book-post figure.highlight .marked {
202 | background-color: #fffce8; }
203 | .book-post figure.highlight pre .deletion {
204 | background: #fdd; }
205 | .book-post figure.highlight pre .addition {
206 | background: #dfd; }
207 | .book-post figure.highlight pre .meta {
208 | color: #6faadb; }
209 | .book-post figure.highlight pre .comment {
210 | color: #5c6370;
211 | font-style: italic; }
212 | .book-post figure.highlight pre .tag {
213 | color: #39adb5; }
214 | .book-post figure.highlight pre .number,
215 | .book-post figure.highlight pre .preprocessor,
216 | .book-post figure.highlight pre .literal,
217 | .book-post figure.highlight pre .params,
218 | .book-post figure.highlight pre .constant,
219 | .book-post figure.highlight pre .command {
220 | color: #d47171; }
221 | .book-post figure.highlight pre .built_in {
222 | color: #e2b35c; }
223 | .book-post figure.highlight pre .variable,
224 | .book-post figure.highlight pre .attribute,
225 | .book-post figure.highlight pre .regexp,
226 | .book-post figure.highlight pre .ruby .constant,
227 | .book-post figure.highlight pre .xml .tag .title,
228 | .book-post figure.highlight pre .xml .pi,
229 | .book-post figure.highlight pre .xml .doctype,
230 | .book-post figure.highlight pre .html .doctype,
231 | .book-post figure.highlight pre .css .id,
232 | .book-post figure.highlight pre .tag .name,
233 | .book-post figure.highlight pre .css .class,
234 | .book-post figure.highlight pre .css .pseudo,
235 | .book-post figure.highlight pre .ruby .class .title,
236 | .book-post figure.highlight pre .css .rules .attribute,
237 | .book-post figure.highlight pre .string,
238 | .book-post figure.highlight pre .value,
239 | .book-post figure.highlight pre .inheritance,
240 | .book-post figure.highlight pre .header,
241 | .book-post figure.highlight pre .ruby .symbol,
242 | .book-post figure.highlight pre .xml .cdata,
243 | .book-post figure.highlight pre .special,
244 | .book-post figure.highlight pre .number,
245 | .book-post figure.highlight pre .formula {
246 | color: #83c951; }
247 | .book-post figure.highlight pre .keyword,
248 | .book-post figure.highlight pre .title,
249 | .book-post figure.highlight pre .css .hexcolor {
250 | color: #9675c2; }
251 | .book-post figure.highlight pre .function,
252 | .book-post figure.highlight pre .python .decorator,
253 | .book-post figure.highlight pre .python .title,
254 | .book-post figure.highlight pre .ruby .function .title,
255 | .book-post figure.highlight pre .ruby .title .keyword,
256 | .book-post figure.highlight pre .perl .sub,
257 | .book-post figure.highlight pre .javascript .title,
258 | .book-post figure.highlight pre .coffeescript .title {
259 | color: #6181b6; }
260 | .book-post figure.highlight pre .tag .attr,
261 | .book-post figure.highlight pre .javascript .function {
262 | color: #c678dd; }
263 |
264 | .book-toc {
265 | position: fixed;
266 | font-size: 0.75rem;
267 | width: 100%; }
268 | .book-toc .book-tocbot {
269 | max-height: 450px;
270 | max-width: 250px;
271 | overflow: auto;
272 | position: relative;
273 | padding-right: 0.875rem; }
274 | .book-toc .book-tocbot ul {
275 | list-style: none;
276 | position: inherit;
277 | overflow: hidden; }
278 | .book-toc .book-tocbot ul li {
279 | margin-left: 0.25rem; }
280 | .book-toc .toc-link::before {
281 | background-color: white !important; }
282 | .book-toc .is-active-link::before {
283 | background-color: #004ed0 !important; }
284 | .book-toc .book-tocbot-menu {
285 | margin: 1rem 0.75rem;
286 | font-size: 0.75rem; }
287 | .book-toc .book-tocbot-menu a {
288 | display: block;
289 | margin: 0.375rem 0;
290 | color: #999;
291 | cursor: pointer; }
292 | .book-toc .book-tocbot-menu a:hover {
293 | color: gray; }
294 |
295 | .book-sidebar .site-meta {
296 | margin: 0.5rem 0 0.875rem 0; }
297 | .book-sidebar .site-meta a {
298 | color: #2f2f2f; }
299 | .book-sidebar .site-meta a:hover {
300 | color: #2f2f2f; }
301 |
302 | .book-sidebar .sidebar-content {
303 | padding-right: 1rem;
304 | display: none; }
305 | .book-sidebar .sidebar-content ul {
306 | list-style: none;
307 | margin-left: 0; }
308 | .book-sidebar .sidebar-content ul ul {
309 | margin: 0 0 0 .5rem; }
310 | .book-sidebar .sidebar-content .icon {
311 | vertical-align: unset; }
312 |
313 | .book-sidebar a {
314 | color: #2f2f2f; }
315 |
316 | .book-sidebar a:hover {
317 | color: gray; }
318 |
319 | .book-sidebar .book-sidebar-current {
320 | color: #004ed0; }
321 |
322 | .book-comments {
323 | padding: 0 0 1.5rem 0; }
324 |
325 | #disqus_thread {
326 | margin: 50px 0; }
327 |
328 | .right {
329 | text-align: right; }
330 |
331 | .left {
332 | text-align: left; }
333 |
--------------------------------------------------------------------------------
/docs/guide/public/install/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
48 |
239 |
49 |
93 |
94 |
238 |
95 |
177 |
178 |
237 |
96 |
176 |
97 |
98 |
99 |
100 |
101 |
104 |
109 |
110 |
111 |
149 |
150 |
151 |
152 |
154 |
155 |
165 |
166 |
167 | Omil 是什么？
omil是一个 webpack 的 loader，它允许你以一种名为单文件组件(SFCs)的格式撰写 Omi 组件：
1 | <template lang="html" name="component-name"> |
Omil 还提供了很多酷炫的特性：
156 |-
157 |
- 允许为 Omi 组件的每个部分使用其它的 webpack loader，例如在
<style>的部分使用 Sass 和在<template>的部分使用 jsx；
158 | - 允许在一个 .omi 文件中使用自定义块，并对其运用自定义的 loader 链； 159 |
- 使用 webpack loader 将
<style>和<template>中引用的资源当作模块依赖来处理；
160 | - 在开发过程中使用热重载来保持状态。 161 |
简而言之，webpack 和 Omi Loader 的结合为你提供了一个现代、灵活且极其强大的前端工作流，来帮助撰写 Omi.js 应用。
163 | 164 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
47 |
242 |
243 |
244 |
245 |
--------------------------------------------------------------------------------
/docs/guide/public/plugin/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
48 |
241 |
49 |
93 |
94 |
240 |
95 |
179 |
180 |
239 |
96 |
178 |
97 |
98 |
99 |
100 |
101 |
104 |
109 |
110 |
111 |
149 |
150 |
151 |
152 |
156 |
157 | 
159 |
160 |
163 |
164 |
166 |
167 |
168 |
169 | 起步
Omi CLI
如果你不想手动设置 webpack，我们推荐使用 Omi CLI 直接创建一个项目的脚手架。通过 Omi CLI 创建的项目会针对多数常见的开发需求进行预先配置，做到开箱即用。
153 |如果Omi CLI提供的内建没有满足你的需求，或者你乐于从零开始创建你自己的 webpack 配置，那么请继续阅读这篇指南。
手动设置
安装
首先先安装好Omil
1 | npm install -D omil |
如果你使用的是 Visual Studio Code 进行开发，强烈建议下载 Omi Snippets 扩展，它会提供给你语法高亮，局部编译等功能。您可以在 VSC 扩展界面里面搜索 omi 这个关键词出现Omi Snippets点击安装即可，稍等片刻，当它安装成功后会提醒你需要重新加载编辑工具，点击重新加载即可使用。
159 |
160 | 每个Omil包的新版本发布时，一个相应版本的Omi Snippets也会随之发布。
webpack 配置
Omi Loader 的配置和其它的 loader 基本一样。
162 |1 | // webpack.config.js |
一个更完整的 webpack 配置示例看起来像这样：
165 |1 | module.exports = { |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
47 |
263 |
264 |
265 |
266 |
--------------------------------------------------------------------------------
48 |
262 |
49 |
93 |
94 |
261 |
95 |
200 |
201 |
260 |
96 |
199 |
97 |
98 |
99 |
100 |
101 |
104 |
109 |
110 |
111 |
149 |
150 |
151 |
152 |
162 |
163 |
173 | 
175 |
176 |
177 |
184 |
185 |
187 |
188 |
189 |
190 | Omi Snippets
在配置完 Omil 之后，我们可以在 VS Code 上同时安装好 Omi Snippets 扩展，这个插件可以方便的让你把 .omi 和 .eno 后缀文件在未经过 webpack 处理前转化为 .js 文件，让你可以直观了解到单文件组件经过 omil 转化后的 JS 文件内容，这相当于局部编译减轻 webpack 处理单文件时候的不必要消耗。
153 |目录结构
例如你在 webpack 的入口文件夹中有一个 .omi 的后缀文件，当你新建并经过编辑保存之后，Omi Snippets扩展会在同级目录下新建一份同名但不同后缀的 .js 文件
154 |-
155 |
- src
-
156 |
- Hello.omi 157 |
- Hello.js 158 |
160 |
| Hello.omi | 165 |开发中你需要编写的单文件组件 | 166 |
|---|---|
| Hello.js | 170 |修改或者保存文件Hello.omi后经过插件转化的js文件 |
171 |
如下图，左边的代码是我们编写的 .omi 后缀的单文件组件，右边是经过 Omi Snippets 生成的 .js 后缀文件。
174 |
175 |
176 |
177 | 示例代码
上图的示例代码如下
178 |-
179 |
<template>标签负责放 JSX 的内容，属性name="my-test"为该组件的名字，后面可以在 JSX 中用<my-text>使用该组件;
180 | <script>标签负责放入组件的逻辑文件，固定的结构为export default class { // 你的代码 }或者为export default HOC(class { // 你的代码 })两种形式，第一种是定义类组件，第二种用来定义高阶组件，你的代码部分可以放入生命周期，函数等;
181 | <style>标签负责定义该组件的局部样式
182 |
1 | <template name="my-test"> |
以下代码就是经过 Omi Snippets 生成的 .js 后缀文件，可以用于在你没有 omil 模块下，主逻辑文件或者其他组件引入调用。
186 |1 | import { WeElement, define, h } from "omi"; |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |