omis - rename omi to omis
This commit is contained in:
dntzhang
parent
85993578ea
commit
3a29123bd8
|
|
@ -13,6 +13,6 @@
|
|||
],
|
||||
"plugins": [
|
||||
"transform-class-properties",
|
||||
["transform-react-jsx", { "pragma": "Omi.h" }]
|
||||
["transform-react-jsx", { "pragma": "Omis.h" }]
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/* eslint no-console:0 */
|
||||
|
||||
/** Find constants (identified by ALL_CAPS_DECLARATIONS), and inline them globally.
|
||||
* This is safe because Omi *only* uses global constants.
|
||||
* This is safe because Omis *only* uses global constants.
|
||||
*/
|
||||
export default (file, api) => {
|
||||
let j = api.jscodeshift,
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import config from "./rollup.config";
|
|||
|
||||
// ES output
|
||||
config.output.format = "es";
|
||||
config.output.file = "dist/omi.esm.js";
|
||||
config.output.file = "dist/omis.esm.js";
|
||||
|
||||
// remove memory() plugin
|
||||
config.plugins.splice(0, 1);
|
||||
|
|
|
|||
|
|
@ -6,27 +6,27 @@ const license = require("rollup-plugin-license");
|
|||
const pkg = require("../package.json");
|
||||
const licensePlugin = license({
|
||||
banner:
|
||||
" omi v" +
|
||||
" omis v" +
|
||||
pkg.version +
|
||||
" http://omijs.org\r\nOmi === Preact + Scoped CSS + Store System + Native Support in 3kb javascript.\r\nBy dntzhang https://github.com/dntzhang \r\n Github: https://github.com/Tencent/omi\r\n MIT Licensed."
|
||||
" http://omijs.org\r\nOmi === Preact + Scoped CSS + Store System + Native Support in 3kb javascript.\r\nBy dntzhang https://github.com/dntzhang \r\n Github: https://github.com/Tencent/omis\r\n MIT Licensed."
|
||||
});
|
||||
|
||||
export default {
|
||||
input: "src/omi.js",
|
||||
input: "src/omis.js",
|
||||
output: {
|
||||
format: "iife",
|
||||
file: "dist/omi.dev.js",
|
||||
name: "omi",
|
||||
file: "dist/omis.dev.js",
|
||||
name: "omis",
|
||||
sourcemap: true,
|
||||
strict: true
|
||||
},
|
||||
plugins: [
|
||||
memory({
|
||||
path: "src/omi.js",
|
||||
path: "src/omis.js",
|
||||
contents: `
|
||||
import Omi from './omi';
|
||||
if (typeof module!='undefined') module.exports = Omi;
|
||||
else self.Omi = Omi;
|
||||
import Omis from './omis';
|
||||
if (typeof module!='undefined') module.exports = Omis;
|
||||
else self.Omis = Omis;
|
||||
`
|
||||
}),
|
||||
nodeResolve({
|
||||
|
|
|
|||
|
|
@ -12,17 +12,17 @@ export default {
|
|||
output: {
|
||||
format: "iife",
|
||||
file: "examples/" + ENV + "/b.js",
|
||||
name: "omi",
|
||||
name: "omis",
|
||||
sourcemap: true,
|
||||
strict: true
|
||||
},
|
||||
plugins: [
|
||||
memory({
|
||||
path: "src/omi.js",
|
||||
path: "src/omis.js",
|
||||
contents: `
|
||||
import Omi from './omi';
|
||||
if (typeof module!='undefined') module.exports = Omi;
|
||||
else self.Omi = Omi;
|
||||
import Omis from './omis';
|
||||
if (typeof module!='undefined') module.exports = Omis;
|
||||
else self.Omis = Omis;
|
||||
`
|
||||
}),
|
||||
nodeResolve({
|
||||
|
|
@ -51,7 +51,7 @@ export default {
|
|||
plugins: [
|
||||
"transform-decorators-legacy",
|
||||
"transform-class-properties",
|
||||
["transform-react-jsx", { pragma: "Omi.h" }]
|
||||
["transform-react-jsx", { pragma: "Omis.h" }]
|
||||
]
|
||||
})
|
||||
]
|
||||
|
|
|
|||
|
|
@ -552,7 +552,7 @@
|
|||
|
||||
// update if it's already a Text node:
|
||||
if (dom && dom.splitText !== undefined && dom.parentNode && (!dom._component || componentRoot)) {
|
||||
/* istanbul ignore if */ /* Browser quirk that can't be covered: https://github.com/developit/omi/commit/fd4f21f5c45dfd75151bd27b4c217d8003aa5eb9 */
|
||||
/* istanbul ignore if */ /* Browser quirk that can't be covered: https://github.com/developit/omis/commit/fd4f21f5c45dfd75151bd27b4c217d8003aa5eb9 */
|
||||
if (dom.nodeValue != vnode) {
|
||||
dom.nodeValue = vnode;
|
||||
}
|
||||
|
|
@ -1017,7 +1017,7 @@
|
|||
} else if (!skip) {
|
||||
// Ensure that pending componentDidMount() hooks of child components
|
||||
// are called before the componentDidUpdate() hook in the parent.
|
||||
// Note: disabled as it causes duplicate hooks, see https://github.com/developit/omi/issues/750
|
||||
// Note: disabled as it causes duplicate hooks, see https://github.com/developit/omis/issues/750
|
||||
// flushMounts();
|
||||
|
||||
if (component.componentDidUpdate) {
|
||||
|
|
@ -1223,7 +1223,7 @@
|
|||
}
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.Omi = {
|
||||
window.Omis = {
|
||||
h: h,
|
||||
createElement: h,
|
||||
cloneElement: cloneElement,
|
||||
|
|
@ -1240,16 +1240,16 @@
|
|||
minutes = store.minutes,
|
||||
seconds = store.seconds;
|
||||
|
||||
return Omi.h(
|
||||
return Omis.h(
|
||||
"svg",
|
||||
{ viewBox: "-50 -50 100 100" },
|
||||
Omi.h("circle", { "class": "clock-face", r: "48" }),
|
||||
Omis.h("circle", { "class": "clock-face", r: "48" }),
|
||||
store.arr.map(function (i) {
|
||||
return Omi.h("line", { "class": "major", y1: "35", y2: "45", transform: "rotate(" + 30 * i + ")" });
|
||||
return Omis.h("line", { "class": "major", y1: "35", y2: "45", transform: "rotate(" + 30 * i + ")" });
|
||||
}),
|
||||
store.arr.map(function (i) {
|
||||
return [1, 2, 3, 4].map(function (o) {
|
||||
return Omi.h("line", {
|
||||
return Omis.h("line", {
|
||||
"class": "minor",
|
||||
y1: "42",
|
||||
y2: "45",
|
||||
|
|
@ -1257,23 +1257,23 @@
|
|||
});
|
||||
});
|
||||
}),
|
||||
Omi.h("line", {
|
||||
Omis.h("line", {
|
||||
"class": "hour",
|
||||
y1: "2",
|
||||
y2: "-20",
|
||||
transform: "rotate(" + (30 * hours + minutes / 2) + ")"
|
||||
}),
|
||||
Omi.h("line", {
|
||||
Omis.h("line", {
|
||||
"class": "minute",
|
||||
y1: "4",
|
||||
y2: "-30",
|
||||
transform: "rotate(" + (6 * minutes + seconds / 10) + ")"
|
||||
}),
|
||||
Omi.h(
|
||||
Omis.h(
|
||||
"g",
|
||||
{ transform: "rotate(" + 6 * seconds + ")" },
|
||||
Omi.h("line", { "class": "second", y1: "10", y2: "-38" }),
|
||||
Omi.h("line", { "class": "second-counterweight", y1: "10", y2: "2" })
|
||||
Omis.h("line", { "class": "second", y1: "10", y2: "-38" }),
|
||||
Omis.h("line", { "class": "second-counterweight", y1: "10", y2: "2" })
|
||||
)
|
||||
);
|
||||
};
|
||||
|
|
@ -1299,7 +1299,7 @@
|
|||
};
|
||||
|
||||
Clock.css = "\n\nsvg {\n\twidth: 100%;\n\theight: 100%;\n}\n\n.clock-face {\n\tstroke: #333;\n\tfill: white;\n}\n\n.minor {\n\tstroke: #999;\n\tstroke-width: 0.5;\n}\n\n.major {\n\tstroke: #333;\n\tstroke-width: 1;\n}\n\n.hour {\n\tstroke: #333;\n}\n\n.minute {\n\tstroke: #666;\n}\n\n.second,\n.second-counterweight {\n\tstroke: rgb(180, 0, 0);\n}\n\n.second-counterweight {\n\tstroke-width: 3;\n}\n";
|
||||
render(Omi.h(Clock, null), 'body');
|
||||
render(Omis.h(Clock, null), 'body');
|
||||
|
||||
}());
|
||||
//# sourceMappingURL=b.js.map
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,4 @@
|
|||
import { render } from '../../src/omi'
|
||||
import { render } from '../../src/omis'
|
||||
|
||||
const Clock = (props, store) => {
|
||||
const { hours, minutes, seconds } = store
|
||||
|
|
|
|||
|
|
@ -552,7 +552,7 @@
|
|||
|
||||
// update if it's already a Text node:
|
||||
if (dom && dom.splitText !== undefined && dom.parentNode && (!dom._component || componentRoot)) {
|
||||
/* istanbul ignore if */ /* Browser quirk that can't be covered: https://github.com/developit/omi/commit/fd4f21f5c45dfd75151bd27b4c217d8003aa5eb9 */
|
||||
/* istanbul ignore if */ /* Browser quirk that can't be covered: https://github.com/developit/omis/commit/fd4f21f5c45dfd75151bd27b4c217d8003aa5eb9 */
|
||||
if (dom.nodeValue != vnode) {
|
||||
dom.nodeValue = vnode;
|
||||
}
|
||||
|
|
@ -1017,7 +1017,7 @@
|
|||
} else if (!skip) {
|
||||
// Ensure that pending componentDidMount() hooks of child components
|
||||
// are called before the componentDidUpdate() hook in the parent.
|
||||
// Note: disabled as it causes duplicate hooks, see https://github.com/developit/omi/issues/750
|
||||
// Note: disabled as it causes duplicate hooks, see https://github.com/developit/omis/issues/750
|
||||
// flushMounts();
|
||||
|
||||
if (component.componentDidUpdate) {
|
||||
|
|
@ -1223,7 +1223,7 @@
|
|||
}
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.Omi = {
|
||||
window.Omis = {
|
||||
h: h,
|
||||
createElement: h,
|
||||
cloneElement: cloneElement,
|
||||
|
|
@ -1237,20 +1237,20 @@
|
|||
|
||||
//逻辑store外置，UI只负责渲染
|
||||
var Counter = function Counter(props, store) {
|
||||
return Omi.h(
|
||||
return Omis.h(
|
||||
'div',
|
||||
null,
|
||||
Omi.h(
|
||||
Omis.h(
|
||||
'button',
|
||||
{ onClick: store.sub },
|
||||
'-'
|
||||
),
|
||||
Omi.h(
|
||||
Omis.h(
|
||||
'text',
|
||||
null,
|
||||
store.count
|
||||
),
|
||||
Omi.h(
|
||||
Omis.h(
|
||||
'button',
|
||||
{ onClick: store.add },
|
||||
'+'
|
||||
|
|
@ -1272,7 +1272,7 @@
|
|||
};
|
||||
};
|
||||
|
||||
render(Omi.h(Counter, null), 'body');
|
||||
render(Omis.h(Counter, null), 'body');
|
||||
|
||||
//or
|
||||
// const App = (props, store) => {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,4 @@
|
|||
import { render } from '../../src/omi'
|
||||
import { render } from '../../src/omis'
|
||||
|
||||
//逻辑store外置，UI只负责渲染
|
||||
const Counter = (props, store) => {
|
||||
|
|
|
|||
|
|
@ -552,7 +552,7 @@
|
|||
|
||||
// update if it's already a Text node:
|
||||
if (dom && dom.splitText !== undefined && dom.parentNode && (!dom._component || componentRoot)) {
|
||||
/* istanbul ignore if */ /* Browser quirk that can't be covered: https://github.com/developit/omi/commit/fd4f21f5c45dfd75151bd27b4c217d8003aa5eb9 */
|
||||
/* istanbul ignore if */ /* Browser quirk that can't be covered: https://github.com/developit/omis/commit/fd4f21f5c45dfd75151bd27b4c217d8003aa5eb9 */
|
||||
if (dom.nodeValue != vnode) {
|
||||
dom.nodeValue = vnode;
|
||||
}
|
||||
|
|
@ -1017,7 +1017,7 @@
|
|||
} else if (!skip) {
|
||||
// Ensure that pending componentDidMount() hooks of child components
|
||||
// are called before the componentDidUpdate() hook in the parent.
|
||||
// Note: disabled as it causes duplicate hooks, see https://github.com/developit/omi/issues/750
|
||||
// Note: disabled as it causes duplicate hooks, see https://github.com/developit/omis/issues/750
|
||||
// flushMounts();
|
||||
|
||||
if (component.componentDidUpdate) {
|
||||
|
|
@ -1223,7 +1223,7 @@
|
|||
}
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.Omi = {
|
||||
window.Omis = {
|
||||
h: h,
|
||||
createElement: h,
|
||||
cloneElement: cloneElement,
|
||||
|
|
@ -1247,7 +1247,7 @@
|
|||
|
||||
App.css = 'div{\n\tcolor: green;\n}';
|
||||
|
||||
render(Omi.h(App, { name: 'Parent Green' }), 'body');
|
||||
render(Omis.h(App, { name: 'Parent Green' }), 'body');
|
||||
|
||||
}());
|
||||
//# sourceMappingURL=b.js.map
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,4 @@
|
|||
import { render, h } from '../../src/omi'
|
||||
import { render, h } from '../../src/omis'
|
||||
|
||||
const HelloMessage = props => {
|
||||
return h('div', {}, props.name)
|
||||
|
|
|
|||
|
|
@ -552,7 +552,7 @@
|
|||
|
||||
// update if it's already a Text node:
|
||||
if (dom && dom.splitText !== undefined && dom.parentNode && (!dom._component || componentRoot)) {
|
||||
/* istanbul ignore if */ /* Browser quirk that can't be covered: https://github.com/developit/omi/commit/fd4f21f5c45dfd75151bd27b4c217d8003aa5eb9 */
|
||||
/* istanbul ignore if */ /* Browser quirk that can't be covered: https://github.com/developit/omis/commit/fd4f21f5c45dfd75151bd27b4c217d8003aa5eb9 */
|
||||
if (dom.nodeValue != vnode) {
|
||||
dom.nodeValue = vnode;
|
||||
}
|
||||
|
|
@ -1017,7 +1017,7 @@
|
|||
} else if (!skip) {
|
||||
// Ensure that pending componentDidMount() hooks of child components
|
||||
// are called before the componentDidUpdate() hook in the parent.
|
||||
// Note: disabled as it causes duplicate hooks, see https://github.com/developit/omi/issues/750
|
||||
// Note: disabled as it causes duplicate hooks, see https://github.com/developit/omis/issues/750
|
||||
// flushMounts();
|
||||
|
||||
if (component.componentDidUpdate) {
|
||||
|
|
@ -1223,7 +1223,7 @@
|
|||
}
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.Omi = {
|
||||
window.Omis = {
|
||||
h: h,
|
||||
createElement: h,
|
||||
cloneElement: cloneElement,
|
||||
|
|
@ -1237,20 +1237,20 @@
|
|||
|
||||
//逻辑store外置，UI只负责渲染
|
||||
var Counter = function Counter(props, store) {
|
||||
return Omi.h(
|
||||
return Omis.h(
|
||||
'div',
|
||||
null,
|
||||
Omi.h(
|
||||
Omis.h(
|
||||
'button',
|
||||
{ onClick: store.sub },
|
||||
'-'
|
||||
),
|
||||
Omi.h(
|
||||
Omis.h(
|
||||
'text',
|
||||
null,
|
||||
store.count
|
||||
),
|
||||
Omi.h(
|
||||
Omis.h(
|
||||
'button',
|
||||
{ onClick: store.add },
|
||||
'+'
|
||||
|
|
@ -1275,15 +1275,15 @@
|
|||
};
|
||||
|
||||
var App = function App(props, store) {
|
||||
return Omi.h(
|
||||
return Omis.h(
|
||||
'div',
|
||||
null,
|
||||
Omi.h(
|
||||
Omis.h(
|
||||
'div',
|
||||
null,
|
||||
'Hello Omis'
|
||||
),
|
||||
Omi.h(Counter, { onChange: store.changeHandle })
|
||||
Omis.h(Counter, { onChange: store.changeHandle })
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -1295,7 +1295,7 @@
|
|||
};
|
||||
};
|
||||
|
||||
render(Omi.h(App, null), 'body');
|
||||
render(Omis.h(App, null), 'body');
|
||||
|
||||
}());
|
||||
//# sourceMappingURL=b.js.map
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,4 @@
|
|||
import { render } from '../../src/omi'
|
||||
import { render } from '../../src/omis'
|
||||
|
||||
//逻辑store外置，UI只负责渲染
|
||||
const Counter = (props, store) => {
|
||||
|
|
|
|||
|
|
@ -552,7 +552,7 @@
|
|||
|
||||
// update if it's already a Text node:
|
||||
if (dom && dom.splitText !== undefined && dom.parentNode && (!dom._component || componentRoot)) {
|
||||
/* istanbul ignore if */ /* Browser quirk that can't be covered: https://github.com/developit/omi/commit/fd4f21f5c45dfd75151bd27b4c217d8003aa5eb9 */
|
||||
/* istanbul ignore if */ /* Browser quirk that can't be covered: https://github.com/developit/omis/commit/fd4f21f5c45dfd75151bd27b4c217d8003aa5eb9 */
|
||||
if (dom.nodeValue != vnode) {
|
||||
dom.nodeValue = vnode;
|
||||
}
|
||||
|
|
@ -1017,7 +1017,7 @@
|
|||
} else if (!skip) {
|
||||
// Ensure that pending componentDidMount() hooks of child components
|
||||
// are called before the componentDidUpdate() hook in the parent.
|
||||
// Note: disabled as it causes duplicate hooks, see https://github.com/developit/omi/issues/750
|
||||
// Note: disabled as it causes duplicate hooks, see https://github.com/developit/omis/issues/750
|
||||
// flushMounts();
|
||||
|
||||
if (component.componentDidUpdate) {
|
||||
|
|
@ -1223,7 +1223,7 @@
|
|||
}
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.Omi = {
|
||||
window.Omis = {
|
||||
h: h,
|
||||
createElement: h,
|
||||
cloneElement: cloneElement,
|
||||
|
|
@ -1241,7 +1241,7 @@
|
|||
|
||||
HelloMessage.css = 'div{\n\tcolor: red;\n}';
|
||||
|
||||
render(Omi.h(HelloMessage, { name: 'Omis' }), 'body');
|
||||
render(Omis.h(HelloMessage, { name: 'Omis' }), 'body');
|
||||
|
||||
}());
|
||||
//# sourceMappingURL=b.js.map
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,4 @@
|
|||
import { render, h } from '../../src/omi'
|
||||
import { render, h } from '../../src/omis'
|
||||
|
||||
const HelloMessage = props => {
|
||||
return h('div', {}, `Hello ${props.name}`)
|
||||
|
|
|
|||
|
|
@ -552,7 +552,7 @@
|
|||
|
||||
// update if it's already a Text node:
|
||||
if (dom && dom.splitText !== undefined && dom.parentNode && (!dom._component || componentRoot)) {
|
||||
/* istanbul ignore if */ /* Browser quirk that can't be covered: https://github.com/developit/omi/commit/fd4f21f5c45dfd75151bd27b4c217d8003aa5eb9 */
|
||||
/* istanbul ignore if */ /* Browser quirk that can't be covered: https://github.com/developit/omis/commit/fd4f21f5c45dfd75151bd27b4c217d8003aa5eb9 */
|
||||
if (dom.nodeValue != vnode) {
|
||||
dom.nodeValue = vnode;
|
||||
}
|
||||
|
|
@ -1017,7 +1017,7 @@
|
|||
} else if (!skip) {
|
||||
// Ensure that pending componentDidMount() hooks of child components
|
||||
// are called before the componentDidUpdate() hook in the parent.
|
||||
// Note: disabled as it causes duplicate hooks, see https://github.com/developit/omi/issues/750
|
||||
// Note: disabled as it causes duplicate hooks, see https://github.com/developit/omis/issues/750
|
||||
// flushMounts();
|
||||
|
||||
if (component.componentDidUpdate) {
|
||||
|
|
@ -1223,7 +1223,7 @@
|
|||
}
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.Omi = {
|
||||
window.Omis = {
|
||||
h: h,
|
||||
createElement: h,
|
||||
cloneElement: cloneElement,
|
||||
|
|
@ -1248,20 +1248,20 @@
|
|||
// </ul>
|
||||
|
||||
var TodoApp = function TodoApp(props, store) {
|
||||
return Omi.h(
|
||||
return Omis.h(
|
||||
'div',
|
||||
null,
|
||||
Omi.h(
|
||||
Omis.h(
|
||||
'h3',
|
||||
null,
|
||||
'TODO'
|
||||
),
|
||||
Omi.h(TodoList, { items: store.items }),
|
||||
Omi.h(
|
||||
Omis.h(TodoList, { items: store.items }),
|
||||
Omis.h(
|
||||
'form',
|
||||
{ onSubmit: store.handleSubmit },
|
||||
Omi.h('input', { onChange: store.handleChange, value: store.text }),
|
||||
Omi.h(
|
||||
Omis.h('input', { onChange: store.handleChange, value: store.text }),
|
||||
Omis.h(
|
||||
'button',
|
||||
null,
|
||||
'Add #',
|
||||
|
|
@ -1293,7 +1293,7 @@
|
|||
};
|
||||
};
|
||||
|
||||
render(Omi.h(TodoApp, null), 'body');
|
||||
render(Omis.h(TodoApp, null), 'body');
|
||||
|
||||
}());
|
||||
//# sourceMappingURL=b.js.map
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,4 @@
|
|||
import { render, h } from '../../src/omi'
|
||||
import { render, h } from '../../src/omis'
|
||||
|
||||
const TodoList = props => (
|
||||
h('ul', {}, props.items.map(
|
||||
|
|
|
|||
|
|
@ -552,7 +552,7 @@
|
|||
|
||||
// update if it's already a Text node:
|
||||
if (dom && dom.splitText !== undefined && dom.parentNode && (!dom._component || componentRoot)) {
|
||||
/* istanbul ignore if */ /* Browser quirk that can't be covered: https://github.com/developit/omi/commit/fd4f21f5c45dfd75151bd27b4c217d8003aa5eb9 */
|
||||
/* istanbul ignore if */ /* Browser quirk that can't be covered: https://github.com/developit/omis/commit/fd4f21f5c45dfd75151bd27b4c217d8003aa5eb9 */
|
||||
if (dom.nodeValue != vnode) {
|
||||
dom.nodeValue = vnode;
|
||||
}
|
||||
|
|
@ -1017,7 +1017,7 @@
|
|||
} else if (!skip) {
|
||||
// Ensure that pending componentDidMount() hooks of child components
|
||||
// are called before the componentDidUpdate() hook in the parent.
|
||||
// Note: disabled as it causes duplicate hooks, see https://github.com/developit/omi/issues/750
|
||||
// Note: disabled as it causes duplicate hooks, see https://github.com/developit/omis/issues/750
|
||||
// flushMounts();
|
||||
|
||||
if (component.componentDidUpdate) {
|
||||
|
|
@ -1223,7 +1223,7 @@
|
|||
}
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.Omi = {
|
||||
window.Omis = {
|
||||
h: h,
|
||||
createElement: h,
|
||||
cloneElement: cloneElement,
|
||||
|
|
@ -1236,7 +1236,7 @@
|
|||
}
|
||||
|
||||
var TreeNode = function TreeNode(props, store) {
|
||||
return Omi.h(
|
||||
return Omis.h(
|
||||
'ul',
|
||||
null,
|
||||
createNode$1(store.data, '#', store)
|
||||
|
|
@ -1247,16 +1247,16 @@
|
|||
|
||||
var children = node.children;
|
||||
var canOpen = children && children.length;
|
||||
return Omi.h(
|
||||
return Omis.h(
|
||||
'li',
|
||||
null,
|
||||
Omi.h(
|
||||
Omis.h(
|
||||
'h4',
|
||||
{ ondblclick: function ondblclick(e) {
|
||||
return store.extend(path);
|
||||
} },
|
||||
node.name,
|
||||
canOpen && Omi.h(
|
||||
canOpen && Omis.h(
|
||||
'span',
|
||||
{ onclick: function onclick(e) {
|
||||
return store.open(path);
|
||||
|
|
@ -1266,13 +1266,13 @@
|
|||
']'
|
||||
)
|
||||
),
|
||||
canOpen && node.open && Omi.h(
|
||||
canOpen && node.open && Omis.h(
|
||||
'ul',
|
||||
null,
|
||||
children.map(function (child, index) {
|
||||
return createNode$1(child, path + '-' + index, store);
|
||||
}),
|
||||
Omi.h(
|
||||
Omis.h(
|
||||
'li',
|
||||
{ 'class': 'add', onclick: function onclick(e) {
|
||||
return store.addChild(path);
|
||||
|
|
@ -1333,7 +1333,7 @@
|
|||
|
||||
TreeNode.css = '\nh4{\n\tcursor:pointer;\n}\n\n.add{\n\tcursor:pointer;\n}\n';
|
||||
|
||||
render(Omi.h(TreeNode, null), 'body');
|
||||
render(Omis.h(TreeNode, null), 'body');
|
||||
|
||||
}());
|
||||
//# sourceMappingURL=b.js.map
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,4 @@
|
|||
import { render } from '../../src/omi'
|
||||
import { render } from '../../src/omis'
|
||||
|
||||
|
||||
const TreeNode = (props, store) => {
|
||||
|
|
|
|||
|
|
@ -1,27 +1,27 @@
|
|||
{
|
||||
"name": "omi",
|
||||
"version": "6.6.9",
|
||||
"description": "Front End Cross-Frameworks Framework.",
|
||||
"main": "dist/omi.js",
|
||||
"jsnext:main": "dist/omi.esm.js",
|
||||
"module": "dist/omi.esm.js",
|
||||
"dev:main": "dist/omi.dev.js",
|
||||
"minified:main": "dist/omi.min.js",
|
||||
"types": "dist/omi.d.ts",
|
||||
"name": "omis",
|
||||
"version": "0.2.0",
|
||||
"description": "Functional Component with store, scoped css and easy hyperscript.",
|
||||
"main": "dist/omis.js",
|
||||
"jsnext:main": "dist/omis.esm.js",
|
||||
"module": "dist/omis.esm.js",
|
||||
"dev:main": "dist/omis.dev.js",
|
||||
"minified:main": "dist/omis.min.js",
|
||||
"types": "dist/omis.d.ts",
|
||||
"scripts": {
|
||||
"clean": "rimraf test/ts/**/*.js",
|
||||
"copy-typescript-definition": "copyfiles -f src/omi.d.ts dist",
|
||||
"copy-typescript-definition": "copyfiles -f src/omis.d.ts dist",
|
||||
"build": "npm-run-all --silent clean transpile copy-typescript-definition strip optimize minify size",
|
||||
"start": "rollup -c config/rollup.example.js --watch",
|
||||
"transpile:main": "rollup -c config/rollup.config.js",
|
||||
"transpile:esm": "rollup -c config/rollup.config.esm.js",
|
||||
"transpile": "npm-run-all transpile:main transpile:esm",
|
||||
"optimize": "uglifyjs dist/omi.dev.js -c conditionals=false,sequences=false,loops=false,join_vars=false,collapse_vars=false --pure-funcs=Object.defineProperty --mangle-props --mangle-regex=\"/^(_|nextBase|prev[CPS]|_parentC)/\" --name-cache config/properties.json -b width=120,quote_style=3 -o dist/omi.js -p relative --in-source-map dist/omi.dev.js.map --source-map dist/omi.js.map",
|
||||
"minify": "uglifyjs dist/omi.js -c collapse_vars,evaluate,screw_ie8,unsafe,loops=false,keep_fargs=false,pure_getters,unused,dead_code -m -o dist/omi.min.js -p relative --in-source-map dist/omi.js.map --source-map dist/omi.min.js.map",
|
||||
"strip:main": "jscodeshift --run-in-band -s -t config/codemod-strip-tdz.js dist/omi.dev.js && jscodeshift --run-in-band -s -t config/codemod-const.js dist/omi.dev.js && jscodeshift --run-in-band -s -t config/codemod-let-name.js dist/omi.dev.js",
|
||||
"strip:esm": "jscodeshift --run-in-band -s -t config/codemod-strip-tdz.js dist/omi.esm.js && jscodeshift --run-in-band -s -t config/codemod-const.js dist/omi.esm.js && jscodeshift --run-in-band -s -t config/codemod-let-name.js dist/omi.esm.js",
|
||||
"optimize": "uglifyjs dist/omis.dev.js -c conditionals=false,sequences=false,loops=false,join_vars=false,collapse_vars=false --pure-funcs=Object.defineProperty --mangle-props --mangle-regex=\"/^(_|nextBase|prev[CPS]|_parentC)/\" --name-cache config/properties.json -b width=120,quote_style=3 -o dist/omis.js -p relative --in-source-map dist/omis.dev.js.map --source-map dist/omis.js.map",
|
||||
"minify": "uglifyjs dist/omis.js -c collapse_vars,evaluate,screw_ie8,unsafe,loops=false,keep_fargs=false,pure_getters,unused,dead_code -m -o dist/omis.min.js -p relative --in-source-map dist/omis.js.map --source-map dist/omis.min.js.map",
|
||||
"strip:main": "jscodeshift --run-in-band -s -t config/codemod-strip-tdz.js dist/omis.dev.js && jscodeshift --run-in-band -s -t config/codemod-const.js dist/omis.dev.js && jscodeshift --run-in-band -s -t config/codemod-let-name.js dist/omis.dev.js",
|
||||
"strip:esm": "jscodeshift --run-in-band -s -t config/codemod-strip-tdz.js dist/omis.esm.js && jscodeshift --run-in-band -s -t config/codemod-const.js dist/omis.esm.js && jscodeshift --run-in-band -s -t config/codemod-let-name.js dist/omis.esm.js",
|
||||
"strip": "npm-run-all strip:main strip:esm",
|
||||
"size": "node -e \"process.stdout.write('gzip size: ')\" && gzip-size --raw dist/omi.min.js",
|
||||
"size": "node -e \"process.stdout.write('gzip size: ')\" && gzip-size --raw dist/omis.min.js",
|
||||
"test": "karma start test/karma.conf.js --single-run",
|
||||
"fix": "eslint src --fix",
|
||||
"fix-e": "eslint examples --fix",
|
||||
|
|
@ -32,10 +32,10 @@
|
|||
"eslintConfig": {
|
||||
"extends": "./config/eslint-config.js"
|
||||
},
|
||||
"typings": "./dist/omi.d.ts",
|
||||
"typings": "./dist/omis.d.ts",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/omi.git"
|
||||
"url": "https://github.com/Tencent/omis.git"
|
||||
},
|
||||
"files": [
|
||||
"src",
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
"typings.json"
|
||||
],
|
||||
"keywords": [
|
||||
"omi",
|
||||
"omis",
|
||||
"webcomponents",
|
||||
"jsx",
|
||||
"proxy",
|
||||
|
|
@ -58,9 +58,9 @@
|
|||
"author": "dntzhang <dntzhang@qq.com>",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/Tencent/omi/issues"
|
||||
"url": "https://github.com/Tencent/omis/issues"
|
||||
},
|
||||
"homepage": "https://github.com/Tencent/omi",
|
||||
"homepage": "https://github.com/Tencent/omis",
|
||||
"devDependencies": {
|
||||
"@types/chai": "^4.1.2",
|
||||
"@types/mocha": "^5.0.0",
|
||||
|
|
@ -107,9 +107,9 @@
|
|||
"mobx": "^4.5.1",
|
||||
"mocha": "^5.0.4",
|
||||
"npm-run-all": "^4.0.0",
|
||||
"omi-mobx": "^0.2.2",
|
||||
"omi-tap": "^2.0.2",
|
||||
"omi-transform": "^2.0.2",
|
||||
"omis-mobx": "^0.2.2",
|
||||
"omis-tap": "^2.0.2",
|
||||
"omis-transform": "^2.0.2",
|
||||
"prettier": "^1.14.3",
|
||||
"remarkable": "^1.7.1",
|
||||
"rimraf": "^2.5.3",
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
},
|
||||
"bundlesize": [
|
||||
{
|
||||
"path": "./dist/omi.min.js",
|
||||
"path": "./dist/omis.min.js",
|
||||
"threshold": "4Kb"
|
||||
}
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
export = omi;
|
||||
export as namespace omi;
|
||||
export = Omis;
|
||||
export as namespace Omis;
|
||||
|
||||
declare namespace omi {
|
||||
declare namespace Omis {
|
||||
type Key = string | number;
|
||||
type RefObject<T> = { current?: T | null };
|
||||
type RefCallback<T> = (instance: T | null) => void;
|
||||
|
|
@ -41,10 +41,10 @@ declare namespace omi {
|
|||
|
||||
type ComponentFactory<P> = ComponentConstructor<P> | FunctionalComponent<P>;
|
||||
/**
|
||||
* Define the contract for a virtual node in omi.
|
||||
* Define the contract for a virtual node in Omis.
|
||||
*
|
||||
* A virtual node has a name, a map of attributes, an array
|
||||
* of child {VNode}s and a key. The key is used by omi for
|
||||
* of child {VNode}s and a key. The key is used by Omis for
|
||||
* internal purposes.
|
||||
*/
|
||||
interface VNode<P = any> {
|
||||
|
|
@ -167,10 +167,10 @@ type Defaultize<Props, Defaults> =
|
|||
|
||||
declare global {
|
||||
namespace JSX {
|
||||
interface Element extends omi.VNode<any> {
|
||||
interface Element extends Omis.VNode<any> {
|
||||
}
|
||||
|
||||
interface ElementClass extends omi.Component<any, any> {
|
||||
interface ElementClass extends Omis.Component<any, any> {
|
||||
}
|
||||
|
||||
interface ElementAttributesProperty {
|
||||
|
|
@ -450,7 +450,7 @@ declare global {
|
|||
type GenericEventHandler = EventHandler<Event>;
|
||||
type PointerEventHandler = EventHandler<PointerEvent>;
|
||||
|
||||
interface DOMAttributes extends omi.PreactDOMAttributes {
|
||||
interface DOMAttributes extends Omis.PreactDOMAttributes {
|
||||
// Image Events
|
||||
onLoad?: GenericEventHandler;
|
||||
onError?: GenericEventHandler;
|
||||
|
|
@ -638,7 +638,7 @@ declare global {
|
|||
onTransitionEndCapture?: TransitionEventHandler;
|
||||
}
|
||||
|
||||
interface HTMLAttributes extends omi.PreactHTMLAttributes, DOMAttributes {
|
||||
interface HTMLAttributes extends Omis.PreactHTMLAttributes, DOMAttributes {
|
||||
// Standard HTML Attributes
|
||||
accept?: string;
|
||||
acceptCharset?: string;
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ export {
|
|||
};
|
||||
|
||||
if(typeof window !== 'undefined'){
|
||||
window.Omi = {
|
||||
window.Omis = {
|
||||
h,
|
||||
createElement,
|
||||
cloneElement,
|
||||
|
|
|
|||
|
|
@ -196,7 +196,7 @@ export function renderComponent(component, renderMode, mountAll, isChild) {
|
|||
else if (!skip) {
|
||||
// Ensure that pending componentDidMount() hooks of child components
|
||||
// are called before the componentDidUpdate() hook in the parent.
|
||||
// Note: disabled as it causes duplicate hooks, see https://github.com/developit/omi/issues/750
|
||||
// Note: disabled as it causes duplicate hooks, see https://github.com/developit/preact/issues/750
|
||||
// flushMounts();
|
||||
|
||||
if (component.componentDidUpdate) {
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ function idiff(dom, vnode, context, mountAll, componentRoot, store) {
|
|||
|
||||
// update if it's already a Text node:
|
||||
if (dom && dom.splitText!==undefined && dom.parentNode && (!dom._component || componentRoot)) {
|
||||
/* istanbul ignore if */ /* Browser quirk that can't be covered: https://github.com/developit/omi/commit/fd4f21f5c45dfd75151bd27b4c217d8003aa5eb9 */
|
||||
/* istanbul ignore if */ /* Browser quirk that can't be covered: https://github.com/developit/preact/commit/fd4f21f5c45dfd75151bd27b4c217d8003aa5eb9 */
|
||||
if (dom.nodeValue!=vnode) {
|
||||
dom.nodeValue = vnode;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,537 @@
|
|||
import {
|
||||
define,
|
||||
render,
|
||||
Component,
|
||||
cloneElement,
|
||||
WeElement,
|
||||
createRef,
|
||||
getHost
|
||||
} from '../../src/omis'
|
||||
|
||||
describe('install()', () => {
|
||||
let scratch
|
||||
//const Empty = () => null
|
||||
|
||||
before(() => {
|
||||
scratch = document.createElement('div')
|
||||
; (document.body || document.documentElement).appendChild(scratch)
|
||||
})
|
||||
|
||||
beforeEach(() => {
|
||||
//let c = scratch.firstElementChild;
|
||||
//if (c) render(<Empty />, scratch, { merge: c })
|
||||
scratch.innerHTML = ''
|
||||
})
|
||||
|
||||
after(() => {
|
||||
scratch.parentNode.removeChild(scratch)
|
||||
scratch = null
|
||||
})
|
||||
|
||||
it('should render components', () => {
|
||||
class Ele extends Component {
|
||||
render() {
|
||||
return <div>Ele</div>
|
||||
}
|
||||
install() {
|
||||
console.log(123)
|
||||
}
|
||||
}
|
||||
|
||||
define('my-ele', Ele)
|
||||
sinon.spy(Ele.prototype, 'render')
|
||||
render(<my-ele />, scratch)
|
||||
|
||||
expect(Ele.prototype.render)
|
||||
.to.have.been.calledOnce.and.to.have.been.calledWithMatch({}, {})
|
||||
.and.to.have.returned(sinon.match({ nodeName: 'div' }))
|
||||
|
||||
expect(scratch.innerHTML).to.equal('<div>Ele</div>')
|
||||
})
|
||||
|
||||
it('should render components with props', () => {
|
||||
const PROPS = { foo: 'bar', onBaz: () => { } }
|
||||
let constructorProps
|
||||
|
||||
class C2 extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
constructorProps = props
|
||||
}
|
||||
render(props) {
|
||||
return <div {...props} />
|
||||
}
|
||||
}
|
||||
sinon.spy(C2.prototype, 'render')
|
||||
|
||||
define('c2-ele', C2)
|
||||
render(<c2-ele {...PROPS} />, scratch)
|
||||
|
||||
expect(constructorProps).to.deep.equal(PROPS)
|
||||
|
||||
expect(C2.prototype.render)
|
||||
.to.have.been.calledOnce.and.to.have.been.calledWithMatch(PROPS, {})
|
||||
.and.to.have.returned(
|
||||
sinon.match({
|
||||
nodeName: 'div',
|
||||
attributes: PROPS
|
||||
})
|
||||
)
|
||||
|
||||
expect(scratch.innerHTML).to.equal('<div foo="bar"></div>')
|
||||
})
|
||||
|
||||
it('should render array', () => {
|
||||
|
||||
class C2 extends Component {
|
||||
|
||||
render(props) {
|
||||
return [<div>a</div>, <div>b</div>]
|
||||
}
|
||||
}
|
||||
sinon.spy(C2.prototype, 'render')
|
||||
|
||||
define('c2-ele', C2)
|
||||
render(<c2-ele />, scratch)
|
||||
|
||||
|
||||
expect(scratch.innerHTML).to.equal('<span><div>a</div><div>b</div></span>')
|
||||
})
|
||||
|
||||
it('ref test', () => {
|
||||
|
||||
var text = ''
|
||||
class C2 extends Component {
|
||||
install() {
|
||||
this.div = createRef()
|
||||
}
|
||||
|
||||
installed() {
|
||||
text = this.div.current.innerHTML
|
||||
}
|
||||
render(props) {
|
||||
return <div><div ref={this.div}>aaa</div></div>
|
||||
}
|
||||
}
|
||||
define('c2-ele', C2)
|
||||
render(<c2-ele />, scratch)
|
||||
|
||||
expect(text).to.equal('aaa')
|
||||
})
|
||||
|
||||
it('ref test2', () => {
|
||||
|
||||
var text = ''
|
||||
class C2 extends Component {
|
||||
|
||||
installed() {
|
||||
text = this.div.innerHTML
|
||||
}
|
||||
render(props) {
|
||||
return <div><div ref={e => { this.div = e }}>aaa</div></div>
|
||||
}
|
||||
}
|
||||
define('c2-ele', C2)
|
||||
render(<c2-ele />, scratch)
|
||||
|
||||
|
||||
expect(text).to.equal('aaa')
|
||||
})
|
||||
|
||||
it('ref test3', () => {
|
||||
|
||||
class C3 extends Component {
|
||||
|
||||
install() {
|
||||
this.name = 'abc'
|
||||
}
|
||||
render(props) {
|
||||
return <div><div>a</div><div>b</div></div>
|
||||
}
|
||||
}
|
||||
|
||||
define('c3-ele', C3)
|
||||
|
||||
var text = ''
|
||||
class C2 extends Component {
|
||||
install() {
|
||||
this.c3 = createRef()
|
||||
}
|
||||
|
||||
installed() {
|
||||
text = this.c3.current.name
|
||||
}
|
||||
render(props) {
|
||||
return <div><c3-ele ref={this.c3}>aaa</c3-ele></div>
|
||||
}
|
||||
}
|
||||
define('c2-ele', C2)
|
||||
render(<c2-ele />, scratch)
|
||||
|
||||
expect(text).to.equal('abc')
|
||||
})
|
||||
|
||||
|
||||
it('should rerender', () => {
|
||||
|
||||
let count = 0
|
||||
class C2 extends Component {
|
||||
|
||||
render(props) {
|
||||
count++
|
||||
return <div><div>a</div><div>b</div></div>
|
||||
}
|
||||
}
|
||||
|
||||
define('c2-ele', C2)
|
||||
|
||||
class C3 extends Component {
|
||||
|
||||
install() {
|
||||
this.aa = 1
|
||||
}
|
||||
render(props) {
|
||||
return <div><c2-ele name={this.aa} /></div>
|
||||
}
|
||||
|
||||
installed() {
|
||||
this.aa = 1
|
||||
this.update()
|
||||
}
|
||||
}
|
||||
define('c3-ele', C3)
|
||||
render(<c3-ele />, scratch)
|
||||
|
||||
|
||||
expect(count).to.equal(1)
|
||||
})
|
||||
|
||||
|
||||
it('should rerender', () => {
|
||||
|
||||
let count = 0
|
||||
class C2 extends Component {
|
||||
|
||||
render(props) {
|
||||
count++
|
||||
return <div><div>a</div><div>b</div></div>
|
||||
}
|
||||
}
|
||||
|
||||
define('c2-ele', C2)
|
||||
|
||||
class C3 extends Component {
|
||||
|
||||
install() {
|
||||
this.aa = 1
|
||||
}
|
||||
render(props) {
|
||||
return <div><c2-ele name={this.aa} /></div>
|
||||
}
|
||||
|
||||
installed() {
|
||||
this.aa = 2
|
||||
this.update()
|
||||
}
|
||||
}
|
||||
define('c3-ele', C3)
|
||||
render(<c3-ele />, scratch)
|
||||
|
||||
|
||||
expect(count).to.equal(2)
|
||||
})
|
||||
|
||||
|
||||
|
||||
it('should rerender', () => {
|
||||
|
||||
let count = 0
|
||||
class C2 extends Component {
|
||||
|
||||
render(props) {
|
||||
count++
|
||||
return <div><div>a</div><div>b</div></div>
|
||||
}
|
||||
}
|
||||
|
||||
define('c2-ele', C2)
|
||||
|
||||
class C3 extends Component {
|
||||
|
||||
install() {
|
||||
this.aa = {}
|
||||
}
|
||||
render(props) {
|
||||
return <div><c2-ele name={this.aa} /></div>
|
||||
}
|
||||
|
||||
installed() {
|
||||
this.update()
|
||||
}
|
||||
}
|
||||
define('c3-ele', C3)
|
||||
render(<c3-ele />, scratch)
|
||||
|
||||
|
||||
expect(count).to.equal(2)
|
||||
})
|
||||
|
||||
|
||||
it('should clone components', () => {
|
||||
let instance = <a-b a />
|
||||
let clone = cloneElement(instance)
|
||||
expect(clone).to.deep.equal(instance)
|
||||
})
|
||||
|
||||
it('should render string', () => {
|
||||
class StringComponent extends Component {
|
||||
render() {
|
||||
return 'Hi there'
|
||||
}
|
||||
}
|
||||
|
||||
define('a-b', StringComponent)
|
||||
|
||||
render(<a-b />, scratch)
|
||||
expect(scratch.innerHTML).to.equal('Hi there')
|
||||
})
|
||||
|
||||
it('should render number as string', () => {
|
||||
define('c-d', class extends Component {
|
||||
render() {
|
||||
return 42
|
||||
}
|
||||
})
|
||||
render(<c-d />, scratch)
|
||||
expect(scratch.innerHTML).to.equal('42')
|
||||
})
|
||||
|
||||
it('should render null as empty string', () => {
|
||||
define('c-d', class extends Component {
|
||||
render() {
|
||||
return null
|
||||
}
|
||||
})
|
||||
render(<c-d />, scratch)
|
||||
expect(scratch.innerHTML).to.equal('')
|
||||
})
|
||||
|
||||
it('should remove orphaned elements replaced by Components', () => {
|
||||
define('c-d', class Comp extends Component {
|
||||
render() {
|
||||
return <span>span in a component</span>
|
||||
}
|
||||
})
|
||||
|
||||
let root
|
||||
function test(content) {
|
||||
root = render(content, scratch, null, null, root)
|
||||
}
|
||||
|
||||
test(<c-d />)
|
||||
test(<div>just a div</div>)
|
||||
test(<c-d />)
|
||||
|
||||
expect(scratch.innerHTML).to.equal('<span>span in a component</span>')
|
||||
})
|
||||
|
||||
describe('props.children', () => {
|
||||
describe('should always be an array', () => {
|
||||
it('render props.children[0]', () => {
|
||||
define('my-p', class extends WeElement {
|
||||
render(props) {
|
||||
return props.children[0]
|
||||
}
|
||||
})
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<my-p>
|
||||
<h2>Hello World</h2>
|
||||
</my-p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, scratch)
|
||||
|
||||
expect(scratch.innerHTML).to.equal('<div><h2>Hello World</h2></div>')
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
describe('getHost test', () => {
|
||||
it('', () => {
|
||||
var a
|
||||
define('my-p', class extends WeElement {
|
||||
css() {
|
||||
a = getHost(this)
|
||||
return `div{}`
|
||||
}
|
||||
render(props) {
|
||||
return props.children[0]
|
||||
}
|
||||
})
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
abc = 111
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<my-p>
|
||||
<h2>Hello World</h2>
|
||||
</my-p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, scratch)
|
||||
|
||||
expect(a.abc).to.equal(111)
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
describe('getHost test', () => {
|
||||
it('', () => {
|
||||
let a, b
|
||||
|
||||
define('my-p-p', class extends WeElement {
|
||||
css() {
|
||||
a = getHost(this)
|
||||
return `div{}`
|
||||
}
|
||||
render(props) {
|
||||
return props.children[0]
|
||||
}
|
||||
})
|
||||
|
||||
define('my-p', class extends WeElement {
|
||||
def = 222
|
||||
css() {
|
||||
b = getHost(this)
|
||||
return `div{}`
|
||||
}
|
||||
render(props) {
|
||||
return <div><my-p-p /></div>
|
||||
}
|
||||
})
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
abc = 111
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<my-p>
|
||||
<h2>Hello World</h2>
|
||||
</my-p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, scratch)
|
||||
|
||||
expect(a.def).to.equal(222)
|
||||
expect(b.abc).to.equal(111)
|
||||
})
|
||||
})
|
||||
|
||||
describe('getHost test', () => {
|
||||
it('', () => {
|
||||
let a, b
|
||||
|
||||
define('my-p-p', class extends WeElement {
|
||||
css() {
|
||||
a = getHost(this)
|
||||
return `div{}`
|
||||
}
|
||||
render(props) {
|
||||
return props.children[0]
|
||||
}
|
||||
})
|
||||
|
||||
define('my-p', class extends WeElement {
|
||||
def = 222
|
||||
css() {
|
||||
b = getHost(this)
|
||||
return `div{}`
|
||||
}
|
||||
render(props) {
|
||||
return <my-p-p />
|
||||
}
|
||||
})
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
abc = 111
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<my-p>
|
||||
<h2>Hello World</h2>
|
||||
</my-p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, scratch)
|
||||
|
||||
expect(a.abc).to.equal(111)
|
||||
expect(b.abc).to.equal(111)
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
describe('scoped css', () => {
|
||||
it('', () => {
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
css() {
|
||||
return `div{}`
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>a</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, scratch)
|
||||
|
||||
expect(scratch.innerHTML).to.equal('<div _ss5=\"\">a</div>')
|
||||
})
|
||||
})
|
||||
|
||||
describe('scoped css', () => {
|
||||
it('', () => {
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
css = `div{ color:red; }`
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>a</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, scratch)
|
||||
|
||||
expect(scratch.innerHTML).to.equal('<div _ss6=\"\">a</div>')
|
||||
|
||||
expect(document.head.querySelector('#_ss6').innerHTML).to.equal('div[_ss6]{ color:red; }')
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
|
|
@ -0,0 +1,297 @@
|
|||
/*
|
||||
* @Author: kinsonpeng
|
||||
* @Date: 2018-12-14 11:49:33
|
||||
* @Last Modified by: kinsonpeng
|
||||
* @Last Modified time: 2018-12-19 17:24:39
|
||||
*/
|
||||
import { define, render, WeElement } from '../../src/omis';
|
||||
// import { diffLevel } from '../../src/vdom/diff';
|
||||
|
||||
describe('lifecycle', () => {
|
||||
let scratch;
|
||||
|
||||
before( () => {
|
||||
scratch = document.createElement('div');
|
||||
(document.body || document.documentElement).appendChild(scratch);
|
||||
});
|
||||
|
||||
beforeEach( () => {
|
||||
scratch.innerHTML = '';
|
||||
});
|
||||
|
||||
after( () => {
|
||||
scratch.parentNode.removeChild(scratch);
|
||||
scratch = null;
|
||||
});
|
||||
|
||||
it('should render install', () => {
|
||||
// 测试install生命周期
|
||||
class M1 extends WeElement {
|
||||
render () {
|
||||
return <div>M1</div>;
|
||||
}
|
||||
install () {
|
||||
console.log('install');
|
||||
}
|
||||
}
|
||||
define("my-render", M1)
|
||||
// let instance = new M1();
|
||||
sinon.spy(M1.prototype, 'install');
|
||||
render(<my-render />, scratch);
|
||||
|
||||
expect(M1.prototype.install)
|
||||
.to.have.been.calledOnce
|
||||
.and.to.have.been.calledWithMatch()
|
||||
|
||||
expect(scratch.innerHTML).to.equal('<div>M1</div>');
|
||||
});
|
||||
|
||||
// 测试beforeRender
|
||||
it ('should render beforeRender', () => {
|
||||
class M2 extends WeElement {
|
||||
static observe = true
|
||||
data = {
|
||||
name: 'M2'
|
||||
}
|
||||
render () {
|
||||
return <div><children name={this.data.name}></children></div>
|
||||
}
|
||||
}
|
||||
|
||||
class children extends WeElement {
|
||||
static defaultProps = {
|
||||
name: 'Omis',
|
||||
age: 18
|
||||
}
|
||||
|
||||
beforeRender () {
|
||||
console.log('beforeRender')
|
||||
this.data.name = this.props.name
|
||||
}
|
||||
|
||||
render (props) {
|
||||
return <div>{props.name} {props.age}</div>
|
||||
}
|
||||
}
|
||||
|
||||
define('children', children)
|
||||
|
||||
define('my-render', M2);
|
||||
|
||||
sinon.spy(children.prototype, 'beforeRender');
|
||||
render(<my-render />, scratch);
|
||||
|
||||
expect(children.prototype.beforeRender)
|
||||
.to.have.been.calledOnce
|
||||
.and.to.have.been.calledWithMatch()
|
||||
|
||||
expect(scratch.innerHTML).to.equal('<div><div>M2 18</div></div>');
|
||||
});
|
||||
|
||||
// 测试installed
|
||||
it('should render installed', () => {
|
||||
class M3 extends WeElement {
|
||||
data = {
|
||||
name: 'M3'
|
||||
}
|
||||
render () {
|
||||
return <div>{this.data.name}</div>
|
||||
}
|
||||
installed () {
|
||||
console.log('installed')
|
||||
}
|
||||
}
|
||||
|
||||
define('my-render', M3);
|
||||
sinon.spy(M3.prototype, 'installed');
|
||||
render(<my-render />, scratch);
|
||||
|
||||
expect(M3.prototype.installed)
|
||||
.to.have.been.calledOnce
|
||||
.and.to.have.been.calledWithMatch()
|
||||
|
||||
expect(scratch.innerHTML).to.equal('<div>M3</div>');
|
||||
});
|
||||
|
||||
// 测试uninstall
|
||||
it ('should render uninstall', () => {
|
||||
class M4 extends WeElement {
|
||||
static observe = true
|
||||
data = {
|
||||
name: 'M4',
|
||||
isShow: true
|
||||
}
|
||||
installed () {
|
||||
this.data.isShow = false
|
||||
}
|
||||
render () {
|
||||
return <div>{
|
||||
this.data.isShow ?
|
||||
<children name={this.data.name}></children>
|
||||
:
|
||||
<div>dl</div>
|
||||
}</div>;
|
||||
}
|
||||
}
|
||||
|
||||
let uninstallable = false
|
||||
class children extends WeElement {
|
||||
static defaultProps = {
|
||||
name: 'children'
|
||||
}
|
||||
render (props) {
|
||||
return <div>{props.name}</div>;
|
||||
}
|
||||
uninstall () {
|
||||
uninstallable = true;
|
||||
console.log('uninstall');
|
||||
this.data.name = this.props.name;
|
||||
}
|
||||
}
|
||||
|
||||
define('children', children);
|
||||
|
||||
define('my-render', M4);
|
||||
sinon.spy(children.prototype, 'uninstall');
|
||||
render(<my-render />, scratch);
|
||||
expect(children.prototype.uninstall).to.have.been.calledOnce;
|
||||
expect(uninstallable).to.equal(true);
|
||||
expect(scratch.innerHTML).to.equal('<div><div>dl</div></div>');
|
||||
});
|
||||
|
||||
it ('should render beforeUpdate', () => {
|
||||
let beforeUpdateable = false;
|
||||
class M5 extends WeElement {
|
||||
static observe = true;
|
||||
data = {
|
||||
name: 'M5'
|
||||
}
|
||||
installed () {
|
||||
this.data.name = 'dl';
|
||||
}
|
||||
render () {
|
||||
return <div><children name={this.data.name}></children></div>;
|
||||
}
|
||||
}
|
||||
|
||||
class children extends WeElement {
|
||||
static defaultProps = {
|
||||
name: 'children'
|
||||
}
|
||||
beforeUpdate () {
|
||||
console.log('beforeUpdate');
|
||||
beforeUpdateable = true;
|
||||
}
|
||||
|
||||
render (props) {
|
||||
return <div>{props.name}</div>;
|
||||
}
|
||||
}
|
||||
|
||||
define('my-render', M5);
|
||||
define('children', children);
|
||||
sinon.spy(children.prototype, 'beforeUpdate');
|
||||
render(<my-render />, scratch);
|
||||
|
||||
expect(children.prototype.beforeUpdate).to.have.been.calledOnce;
|
||||
|
||||
expect(scratch.innerHTML).to.equal('<div><div>dl</div></div>');
|
||||
|
||||
});
|
||||
|
||||
it ('should render afterUpdate', () => {
|
||||
let afterUpdateable = false;
|
||||
class M6 extends WeElement {
|
||||
static observe = true;
|
||||
|
||||
data = {
|
||||
name: 'M6'
|
||||
}
|
||||
|
||||
installed () {
|
||||
this.data.name = 'dl'
|
||||
}
|
||||
|
||||
render () {
|
||||
return <div><children name={this.data.name}></children></div>;
|
||||
}
|
||||
}
|
||||
|
||||
class children extends WeElement {
|
||||
static defaultProps = {
|
||||
name: 'children'
|
||||
}
|
||||
|
||||
afterUpdate () {
|
||||
console.log('afterUpdate');
|
||||
afterUpdateable = true;
|
||||
}
|
||||
|
||||
render (props) {
|
||||
return <div>{props.name}</div>;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
define('children', children);
|
||||
define('my-render', M6);
|
||||
|
||||
sinon.spy(children.prototype, 'afterUpdate');
|
||||
|
||||
render(<my-render />, scratch);
|
||||
|
||||
expect(children.prototype.afterUpdate).to.have.been.calledOnce;
|
||||
|
||||
expect(scratch.innerHTML).to.equal('<div><div>dl</div></div>')
|
||||
|
||||
});
|
||||
|
||||
it ('should render updated', () => {
|
||||
let updatedable = false;
|
||||
class M6 extends WeElement {
|
||||
static observe = true;
|
||||
|
||||
data = {
|
||||
name: 'M6'
|
||||
}
|
||||
|
||||
installed() {
|
||||
this.data.name = 'dl';
|
||||
}
|
||||
|
||||
render () {
|
||||
return <div><children name={this.data.name}></children></div>;
|
||||
}
|
||||
}
|
||||
|
||||
class children extends WeElement {
|
||||
static defaultProps = {
|
||||
name: 'children'
|
||||
}
|
||||
|
||||
updated () {
|
||||
console.log('updated');
|
||||
updatedable = true;
|
||||
}
|
||||
|
||||
render (props) {
|
||||
return <div>{props.name}</div>;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
define('children', children);
|
||||
define('my-render', M6);
|
||||
|
||||
sinon.spy(children.prototype, 'updated');
|
||||
|
||||
render(<my-render />, scratch);
|
||||
|
||||
expect(children.prototype.updated).to.have.been.calledOnce;
|
||||
|
||||
expect(scratch.innerHTML).to.equal('<div><div>dl</div></div>');
|
||||
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
|
|
@ -0,0 +1,193 @@
|
|||
/*
|
||||
* @Author: kinsonpeng
|
||||
* @Date: 2018-12-19 15:50:55
|
||||
* @Last Modified by: kinsonpeng
|
||||
* @Last Modified time: 2018-12-20 16:11:35
|
||||
*/
|
||||
import { define, render, WeElement, renderToString } from '../../src/omis';
|
||||
|
||||
describe('render()', () => {
|
||||
|
||||
|
||||
define('todo-app', class extends WeElement {
|
||||
|
||||
data = { items: [], text: '' }
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>ab</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
it('render to string without style', () => {
|
||||
let res = renderToString(<todo-app />)
|
||||
|
||||
expect(res.html).to.equal('<div>ab</div>');
|
||||
})
|
||||
|
||||
define('todo-app2', class extends WeElement {
|
||||
static css = 'h3 { color:red; }'
|
||||
|
||||
data = { items: [], text: '' }
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>ab</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
it('render to string with style', () => {
|
||||
let res = renderToString(<todo-app2 />)
|
||||
|
||||
expect(res.html).to.equal('<div _ss0>ab</div>');
|
||||
expect(res.css).to.deep.equal([{ id: '_ss0', css: 'h3[_ss0]{ color:red; }' }])
|
||||
})
|
||||
|
||||
|
||||
it('render to string without style', () => {
|
||||
let res = renderToString(<todo-app2 />, { scopedCSS: false })
|
||||
|
||||
expect(res.html).to.equal('<div>ab</div>');
|
||||
})
|
||||
|
||||
|
||||
|
||||
define('todo-list', class extends WeElement {
|
||||
static css = 'li { color:green; }'
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<ul>
|
||||
{props.items.map(item => (
|
||||
<li key={item.id}>{item.text}</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
define('todo-app3', class extends WeElement {
|
||||
static observe = true
|
||||
|
||||
static css = 'h3 { color:red; }'
|
||||
|
||||
data = { items: [], text: '' }
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h3>TODO</h3>
|
||||
<todo-list items={this.data.items} />
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<input
|
||||
id="new-todo"
|
||||
onChange={this.handleChange}
|
||||
value={this.data.text}
|
||||
/>
|
||||
<button>Add #{this.data.items.length + 1}</button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
handleChange = e => {
|
||||
this.data.text = e.target.value
|
||||
}
|
||||
|
||||
handleSubmit = e => {
|
||||
e.preventDefault()
|
||||
if (!this.data.text.trim().length) {
|
||||
return
|
||||
}
|
||||
this.data.items.push({
|
||||
text: this.data.text,
|
||||
id: Date.now()
|
||||
})
|
||||
this.data.text = ''
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
it('render to string with nest element', () => {
|
||||
let res = renderToString(<todo-app3 />, { scopedCSS: false })
|
||||
|
||||
expect(res.html).to.equal('<div><h3>TODO</h3><ul></ul><form><input id="new-todo" value /><button>Add #1</button></form></div>');
|
||||
})
|
||||
|
||||
|
||||
|
||||
it('render to string with nest element and scoped css', () => {
|
||||
let res = renderToString(<todo-app3 />, { scopedCSS: true })
|
||||
|
||||
expect(res.html).to.equal('<div _ss1><h3 _ss1>TODO</h3><ul _ss2 _ss1></ul><form _ss1><input id="new-todo" value _ss1 /><button _ss1>Add #1</button></form></div>');
|
||||
expect(res.css).to.deep.equal(
|
||||
[
|
||||
{ id: '_ss1', css: 'h3[_ss1]{ color:red; }' },
|
||||
{ id: '_ss2', css: 'li[_ss2]{ color:green; }' }
|
||||
]
|
||||
)
|
||||
})
|
||||
|
||||
|
||||
define('todo-app4', class extends WeElement {
|
||||
static observe = true
|
||||
|
||||
static css = 'h3 { color:red; }'
|
||||
|
||||
data = { items: [], text: '' }
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h3>TODO</h3>
|
||||
<todo-list items={this.data.items} />
|
||||
<todo-list items={this.data.items} />
|
||||
<todo-list items={this.data.items} />
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<input
|
||||
id="new-todo"
|
||||
onChange={this.handleChange}
|
||||
value={this.data.text}
|
||||
/>
|
||||
<button>Add #{this.data.items.length + 1}</button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
handleChange = e => {
|
||||
this.data.text = e.target.value
|
||||
}
|
||||
|
||||
handleSubmit = e => {
|
||||
e.preventDefault()
|
||||
if (!this.data.text.trim().length) {
|
||||
return
|
||||
}
|
||||
this.data.items.push({
|
||||
text: this.data.text,
|
||||
id: Date.now()
|
||||
})
|
||||
this.data.text = ''
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
it('render to string with nest element and children elements', () => {
|
||||
let res = renderToString(<todo-app4 />)
|
||||
|
||||
expect(res.html).to.equal('<div _ss3><h3 _ss3>TODO</h3><ul _ss2 _ss3></ul><ul _ss2 _ss3></ul><ul _ss2 _ss3></ul><form _ss3><input id="new-todo" value _ss3 /><button _ss3>Add #1</button></form></div>');
|
||||
expect(res.css).to.deep.equal([{
|
||||
id: '_ss3',
|
||||
css: 'h3[_ss3]{ color:red; }'
|
||||
|
||||
}, {
|
||||
id: '_ss2',
|
||||
css: 'li[_ss2]{ color:green; }'
|
||||
}])
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
|
|
@ -0,0 +1,360 @@
|
|||
/*
|
||||
* @Author: kinsonpeng
|
||||
* @Date: 2018-12-19 15:50:55
|
||||
* @Last Modified by: kinsonpeng
|
||||
* @Last Modified time: 2018-12-20 16:11:35
|
||||
*/
|
||||
import { define, render, WeElement } from '../../src/omis';
|
||||
import { relative } from 'path';
|
||||
|
||||
function getAttributes(node) {
|
||||
let attrs = {};
|
||||
// console.log(node.attributes)
|
||||
Object.keys(node.attributes).forEach(function (item) {
|
||||
attrs[node.attributes[item].name] = node.attributes[item].value;
|
||||
})
|
||||
return attrs;
|
||||
}
|
||||
|
||||
describe('render()', () => {
|
||||
let scratch;
|
||||
|
||||
before(() => {
|
||||
scratch = document.createElement('div');
|
||||
(document.body || document.documentElement).appendChild(scratch);
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
scratch.innerHTML = '';
|
||||
});
|
||||
|
||||
after(() => {
|
||||
scratch.parentNode.removeChild(scratch);
|
||||
scratch = null;
|
||||
});
|
||||
|
||||
it('should render a empty text node', () => {
|
||||
render(null, scratch);
|
||||
let node = scratch.childNodes;
|
||||
expect(node).to.have.length(1);
|
||||
// console.log(node[0].nodeName)
|
||||
expect(node[0].data).to.equal('');
|
||||
expect(node[0].nodeName).to.equal('#text');
|
||||
})
|
||||
|
||||
it('shuold create empty nodes (<* />)', () => {
|
||||
render(<div />, scratch);
|
||||
expect(scratch.childNodes).to.have.length(1);
|
||||
expect(scratch.childNodes[0].nodeName).to.equal('DIV');
|
||||
|
||||
scratch.innerHTML = '';
|
||||
|
||||
render(<my-render />, scratch);
|
||||
expect(scratch.childNodes).to.have.length(1);
|
||||
expect(scratch.childNodes[0].nodeName).to.equal('MY-RENDER');
|
||||
|
||||
scratch.innerHTML = '';
|
||||
|
||||
render(<my-render />, scratch);
|
||||
render(<my-view />, scratch);
|
||||
expect(scratch.childNodes).to.have.length(2);
|
||||
expect(scratch.childNodes[0].nodeName).to.equal('MY-RENDER');
|
||||
expect(scratch.childNodes[1].nodeName).to.equal('MY-VIEW');
|
||||
|
||||
});
|
||||
|
||||
it('should node list', () => {
|
||||
render(<div><span></span></div>, scratch);
|
||||
expect(scratch.childNodes).to.have.length(1);
|
||||
expect(scratch.childNodes[0].nodeName).to.equal('DIV');
|
||||
expect(scratch.childNodes[0].childNodes[0].nodeName).to.equal('SPAN');
|
||||
|
||||
scratch.innerHTML = '';
|
||||
|
||||
render(<div><my-render /></div>, scratch);
|
||||
expect(scratch.childNodes).to.have.length(1);
|
||||
expect(scratch.childNodes[0].nodeName).to.equal('DIV');
|
||||
expect(scratch.childNodes[0].childNodes[0].nodeName).to.equal('MY-RENDER');
|
||||
|
||||
|
||||
scratch.innerHTML = '';
|
||||
|
||||
render(<div>
|
||||
<my-render />
|
||||
<my-view />
|
||||
<my-list />
|
||||
</div>, scratch);
|
||||
let p = scratch.childNodes[0];
|
||||
expect(p.childNodes[0].nodeName).to.equal('MY-RENDER');
|
||||
expect(p.childNodes[1].nodeName).to.equal('MY-VIEW');
|
||||
expect(p.childNodes[2].nodeName).to.equal('MY-LIST');
|
||||
})
|
||||
|
||||
it('should not render false value', () => {
|
||||
render(<div>
|
||||
{null}, {undefined}, {0}, {NaN}
|
||||
</div>, scratch);
|
||||
// console.log(scratch.childNodes.property)
|
||||
expect(scratch.firstChild).to.have.property('innerHTML', ', , 0, NaN');
|
||||
})
|
||||
|
||||
it('should not render null', () => {
|
||||
render(null, scratch);
|
||||
expect(scratch.innerHTML).to.equal('');
|
||||
})
|
||||
|
||||
it('should not render undefined', () => {
|
||||
render(undefined, scratch);
|
||||
expect(scratch.innerHTML).to.equal('');
|
||||
})
|
||||
|
||||
it('should not render boolean', () => {
|
||||
render(true, scratch);
|
||||
// console.log(scratch.innerHTML)
|
||||
expect(scratch.innerHTML).to.equal('');
|
||||
|
||||
scratch.innerHTML = '';
|
||||
|
||||
render(false, scratch);
|
||||
expect(scratch.innerHTML).to.equal('');
|
||||
})
|
||||
|
||||
it('should render NaN', () => {
|
||||
render(NaN, scratch);
|
||||
expect(scratch.innerHTML).to.equal('NaN');
|
||||
})
|
||||
|
||||
it('sholud render 0', () => {
|
||||
render(0, scratch);
|
||||
expect(scratch.innerHTML).to.equal('0');
|
||||
})
|
||||
|
||||
it('should render number', () => {
|
||||
render(1, scratch);
|
||||
expect(scratch.innerHTML).to.equal('1');
|
||||
})
|
||||
|
||||
it('should render string', () => {
|
||||
render('I am string', scratch);
|
||||
expect(scratch.innerHTML).to.equal('I am string');
|
||||
})
|
||||
|
||||
it('should render attributes to string', () => {
|
||||
render(<div anull={null} aundefined={undefined} a0={0} aNaN={NaN} afalse={false}></div>, scratch);
|
||||
expect(getAttributes(scratch.firstChild)).to.eql({
|
||||
a0: '0',
|
||||
anan: 'NaN'
|
||||
});
|
||||
|
||||
scratch.innerHTML = '';
|
||||
|
||||
render(<my-render anull={null} aundefined={undefined} a0={0} aNaN={NaN} afalse={false} />, scratch);
|
||||
expect(getAttributes(scratch.firstChild)).to.eql({
|
||||
a0: '0',
|
||||
anan: 'NaN'
|
||||
});
|
||||
})
|
||||
|
||||
it('should render input value', () => {
|
||||
render(<div>
|
||||
<input value={0} />
|
||||
<input value={null} />
|
||||
<input value={undefined} />
|
||||
<input value={NaN} />
|
||||
<input value={false} />
|
||||
</div>, scratch);
|
||||
let child = scratch.firstChild;
|
||||
expect(child.children[0].value).to.equal('0');
|
||||
expect(child.children[1].value).to.equal('');
|
||||
expect(child.children[2].value).to.equal('');
|
||||
expect(child.children[3].value).to.equal('NaN');
|
||||
expect(child.children[4].value).to.equal('false');
|
||||
})
|
||||
|
||||
it('should apply dom attributes', () => {
|
||||
render(<div my-attrs="myattrs" name="dl"></div>, scratch);
|
||||
|
||||
let node = scratch.firstChild
|
||||
|
||||
expect(node.attributes[0].name).to.equal('my-attrs');
|
||||
expect(node.attributes[0].value).to.equal('myattrs');
|
||||
|
||||
expect(node.attributes[1].name).to.equal('name');
|
||||
expect(node.attributes[1].value).to.equal('dl');
|
||||
|
||||
})
|
||||
|
||||
it('should render className', () => {
|
||||
render(<div class="name"></div>, scratch);
|
||||
expect(scratch.childNodes[0]).to.have.property('className', 'name');
|
||||
})
|
||||
|
||||
it('should not render function props as attributes', () => {
|
||||
render(<div
|
||||
onClick={function a() { }}
|
||||
onTouch={function b() { }}
|
||||
></div>, scratch);
|
||||
|
||||
let node = scratch.firstChild;
|
||||
|
||||
expect(node.attributes).to.have.length(0);
|
||||
|
||||
})
|
||||
|
||||
it('should render object', () => {
|
||||
render(<div data={{ name: 'dl' }}></div>, scratch);
|
||||
|
||||
let node = scratch.firstChild;
|
||||
|
||||
expect(node.attributes).to.have.length(1);
|
||||
expect(node.attributes[0].name).to.equal('data');
|
||||
expect(node.attributes[0].value).to.equal('[object Object]');
|
||||
})
|
||||
|
||||
it('should render style as string', () => {
|
||||
render(<div style="color: red; background: black;"></div>, scratch);
|
||||
expect(scratch.childNodes[0].style.cssText)
|
||||
.that.matches(/\s*color\s*:\s*red\s*/)
|
||||
.and.matches(/\s*background\s*:\s*black\s*/);
|
||||
})
|
||||
|
||||
it('should only register on* event as handles', () => {
|
||||
let onclick = () => { };
|
||||
let click = () => { };
|
||||
|
||||
let node = document.createElement('div').constructor.prototype;
|
||||
|
||||
sinon.spy(node, 'addEventListener');
|
||||
|
||||
render(<div click={click} onClick={onclick} />, scratch);
|
||||
|
||||
expect(scratch.childNodes[0].attributes.length).to.equal(0);
|
||||
|
||||
// console.log(sinon.match.func)
|
||||
|
||||
// sinon.match.func 封装后的可执行的函数
|
||||
expect(node.addEventListener).to.have.been.calledOnce
|
||||
.and.to.have.been.calledWithExactly('click', sinon.match.func, false);
|
||||
|
||||
// restore() 释放监听
|
||||
node.addEventListener.restore();
|
||||
|
||||
})
|
||||
|
||||
it('should add and remove event handles', () => {
|
||||
let click = sinon.spy();
|
||||
let mouseup = sinon.spy();
|
||||
let node = document.createElement('div').constructor.prototype;
|
||||
|
||||
sinon.spy(node, 'addEventListener');
|
||||
sinon.spy(node, 'removeEventListener');
|
||||
|
||||
function trigger(node, type) {
|
||||
let event = document.createEvent('Event');
|
||||
event.initEvent(type, true, true);
|
||||
node.dispatchEvent(event);
|
||||
}
|
||||
|
||||
sinon.spy(click);
|
||||
|
||||
render(<div onClick={() => click(1)} onMouseUp={mouseup} ></div>, scratch);
|
||||
|
||||
expect(node.addEventListener).to.have.been.calledTwice
|
||||
.and.to.have.been.calledWith('click');
|
||||
|
||||
trigger(scratch.childNodes[0], 'click');
|
||||
|
||||
expect(click).to.have.been.calledOnce
|
||||
.and.to.have.been.calledWith(1)
|
||||
|
||||
// resetHistory() 重置存根的历史记录 => 此为保留根的点击事件，并重置点击事件
|
||||
node.addEventListener.resetHistory();
|
||||
click.resetHistory();
|
||||
|
||||
render(
|
||||
// 保留根的点击事件状态，使余下点击事件无法注册；
|
||||
<div onClick={() => click(2)} ></div>
|
||||
, scratch, null, null, scratch.firstChild);
|
||||
|
||||
expect(node.addEventListener).to.not.have.been.called
|
||||
|
||||
expect(node.removeEventListener).to.have.been.calledOnce
|
||||
.and.calledWith('mouseup');
|
||||
|
||||
trigger(scratch.childNodes[0], 'click');
|
||||
expect(click).to.have.been.called
|
||||
.and.calledWith(2);
|
||||
|
||||
trigger(scratch.childNodes[0], 'mouseup');
|
||||
expect(mouseup).to.not.have.been.called;
|
||||
|
||||
node.removeEventListener.resetHistory();
|
||||
click.resetHistory();
|
||||
mouseup.resetHistory();
|
||||
|
||||
render(<div />, scratch, null, null, scratch.firstChild);
|
||||
|
||||
expect(node.removeEventListener).to.have.been.calledOnce
|
||||
.and.calledWith('click');
|
||||
|
||||
trigger(scratch.childNodes[0], 'click');
|
||||
|
||||
expect(click).to.not.have.been.called;
|
||||
|
||||
node.addEventListener.restore();
|
||||
node.removeEventListener.restore();
|
||||
|
||||
})
|
||||
|
||||
it('should render merge style', () => {
|
||||
render(<div style={
|
||||
{
|
||||
background: 'rgba(0, 0, 0, 1)',
|
||||
color: 'rgba(100, 100, 100, 1)',
|
||||
fontSize: '16px',
|
||||
textAlign: 'center',
|
||||
display: 'table-cell',
|
||||
verticalAlign: 'middle'
|
||||
}
|
||||
}></div>, scratch);
|
||||
|
||||
let { style } = scratch.firstChild;
|
||||
|
||||
expect(style).to.have.property('background').and.that.equals('rgb(0, 0, 0)');
|
||||
expect(style).to.have.property('color').and.that.equals('rgb(100, 100, 100)');
|
||||
expect(style).to.have.property('font-size').and.that.equals('16px');
|
||||
expect(style).to.have.property('textAlign', 'center');
|
||||
expect(style).to.have.property('display', 'table-cell');
|
||||
expect(style).to.have.property('verticalAlign', 'middle');
|
||||
|
||||
render(<div style={
|
||||
{
|
||||
color: 'rgba(255, 255, 255, 1)'
|
||||
}
|
||||
} />, scratch, null, null, scratch.firstChild);
|
||||
|
||||
// console.log(scratch)
|
||||
|
||||
expect(style).to.have.property('color').and.that.not.equals('rgb(0, 0, 0)');
|
||||
|
||||
render(<div style={
|
||||
{
|
||||
position: 'relative'
|
||||
}
|
||||
} />, scratch, null, null, scratch.firstChild);
|
||||
|
||||
expect(style).to.have.property('position').and.that.equals('relative');
|
||||
|
||||
})
|
||||
|
||||
// it ('should void render xss', () => {
|
||||
// let dom = '<div>I am <br /></div>'
|
||||
|
||||
// render(<div>
|
||||
// {dom}
|
||||
// </div>, scratch);
|
||||
|
||||
// console.log(scratch)
|
||||
// })
|
||||
|
||||
})
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import { applyRef } from '../../src/util'
|
||||
|
||||
describe('applyRef()', () => {
|
||||
it('should be called a ref function', () => {
|
||||
const ref = () => {}
|
||||
const cb = sinon.spy(ref)
|
||||
applyRef(cb)
|
||||
expect(cb).to.have.been.called
|
||||
})
|
||||
|
||||
it('should be called a ref function with value argument', () => {
|
||||
const ref = () => {}
|
||||
const cb = sinon.spy(ref)
|
||||
const value = 'omis'
|
||||
applyRef(cb, value)
|
||||
expect(cb).to.have.been.calledWithMatch(value)
|
||||
})
|
||||
|
||||
it('should be assigned a value to current property', () => {
|
||||
const ref = {
|
||||
current: ''
|
||||
}
|
||||
const value = 'omis'
|
||||
applyRef(ref, value)
|
||||
expect(ref.current).to.equal('omis')
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
/*eslint no-var:0, object-shorthand:0 */
|
||||
|
||||
//var coverage = String(process.env.COVERAGE) === 'true',
|
||||
// ci = String(process.env.CI).match(/^(1|true)$/gi),
|
||||
// pullRequest = !String(process.env.TRAVIS_PULL_REQUEST).match(/^(0|false|undefined)$/gi),
|
||||
// masterBranch = String(process.env.TRAVIS_BRANCH).match(/^master$/gi),
|
||||
// sauceLabs = ci && !pullRequest && masterBranch,
|
||||
var coverage = false,
|
||||
sauceLabs = false,
|
||||
performance = !coverage && String(process.env.PERFORMANCE)!=='false',
|
||||
webpack = require('webpack');
|
||||
|
||||
var sauceLabsLaunchers = {
|
||||
sl_chrome: {
|
||||
base: 'SauceLabs',
|
||||
browserName: 'chrome',
|
||||
platform: 'Windows 10'
|
||||
},
|
||||
sl_firefox: {
|
||||
base: 'SauceLabs',
|
||||
browserName: 'firefox',
|
||||
platform: 'Windows 10'
|
||||
},
|
||||
sl_safari: {
|
||||
base: 'SauceLabs',
|
||||
browserName: 'safari',
|
||||
platform: 'OS X 10.11'
|
||||
},
|
||||
sl_edge: {
|
||||
base: 'SauceLabs',
|
||||
browserName: 'MicrosoftEdge',
|
||||
platform: 'Windows 10'
|
||||
},
|
||||
sl_ie_11: {
|
||||
base: 'SauceLabs',
|
||||
browserName: 'internet explorer',
|
||||
version: '11.103',
|
||||
platform: 'Windows 10'
|
||||
}
|
||||
};
|
||||
|
||||
var localLaunchers = {
|
||||
ChromeNoSandboxHeadless: {
|
||||
base: 'Chrome',
|
||||
flags: [
|
||||
'--no-sandbox',
|
||||
// See https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md
|
||||
'--headless',
|
||||
'--disable-gpu',
|
||||
// Without a remote debugging port, Google Chrome exits immediately.
|
||||
'--remote-debugging-port=9333'
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = function(config) {
|
||||
config.set({
|
||||
browsers: sauceLabs
|
||||
? Object.keys(sauceLabsLaunchers)
|
||||
: Object.keys(localLaunchers),
|
||||
|
||||
frameworks: ['source-map-support', 'mocha', 'chai-sinon'],
|
||||
|
||||
reporters: ['mocha'].concat(
|
||||
coverage ? 'coverage' : [],
|
||||
sauceLabs ? 'saucelabs' : []
|
||||
),
|
||||
|
||||
// coverageReporter: {
|
||||
// dir: __dirname+'/../coverage',
|
||||
// reporters: [
|
||||
// { type: 'text-summary' },
|
||||
// { type: 'html' },
|
||||
// { type: 'lcovonly', subdir: '.', file: 'lcov.info' }
|
||||
// ]
|
||||
// },
|
||||
|
||||
mochaReporter: {
|
||||
showDiff: true
|
||||
},
|
||||
|
||||
browserLogOptions: { terminal: true },
|
||||
browserConsoleLogOptions: { terminal: true },
|
||||
|
||||
browserNoActivityTimeout: 5 * 60 * 1000,
|
||||
|
||||
// Use only two browsers concurrently, works better with open source Sauce Labs remote testing
|
||||
concurrency: 2,
|
||||
|
||||
// sauceLabs: {
|
||||
// tunnelIdentifier: process.env.TRAVIS_JOB_NUMBER || ('local'+require('./package.json').version),
|
||||
// startConnect: false
|
||||
// },
|
||||
|
||||
customLaunchers: sauceLabs ? sauceLabsLaunchers : localLaunchers,
|
||||
|
||||
files: [
|
||||
{ pattern: 'polyfills.js', watched: false },
|
||||
{ pattern: '{browser,shared}/**.js', watched: false }
|
||||
],
|
||||
|
||||
preprocessors: {
|
||||
'**/*': ['webpack', 'sourcemap']
|
||||
},
|
||||
|
||||
webpack: {
|
||||
mode: 'development',
|
||||
devtool: 'inline-source-map',
|
||||
module: {
|
||||
/* Transpile source and test files */
|
||||
rules: [
|
||||
{
|
||||
enforce: 'pre',
|
||||
test: /\.jsx?$/,
|
||||
exclude: /node_modules/,
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
comments: false,
|
||||
compact: true,
|
||||
plugins : [
|
||||
'transform-class-properties',
|
||||
["transform-react-jsx", { "pragma":"Omis.h" }]
|
||||
]
|
||||
}
|
||||
},
|
||||
/* Only Instrument our source files for coverage */
|
||||
coverage ? {
|
||||
test: /\.jsx?$/,
|
||||
loader: 'istanbul-instrumenter-loader',
|
||||
include: /src/
|
||||
} : {}
|
||||
]
|
||||
},
|
||||
resolve: {
|
||||
// The React DevTools integration requires preact as a module
|
||||
// rather than referencing source files inside the module
|
||||
// directly
|
||||
alias: { Omis: '../src/omis' },
|
||||
modules: [__dirname, 'node_modules']
|
||||
},
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
coverage: coverage,
|
||||
NODE_ENV: JSON.stringify(process.env.NODE_ENV || ''),
|
||||
ENABLE_PERFORMANCE: performance,
|
||||
DISABLE_FLAKEY: !!String(process.env.FLAKEY).match(/^(0|false)$/gi)
|
||||
})
|
||||
],
|
||||
performance: {
|
||||
hints: false
|
||||
}
|
||||
},
|
||||
|
||||
webpackMiddleware: {
|
||||
noInfo: true
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
// ES2015 APIs used by developer tools integration
|
||||
import 'core-js/es6/map';
|
||||
import 'core-js/fn/array/fill';
|
||||
import 'core-js/fn/array/from';
|
||||
import 'core-js/fn/object/assign';
|
||||
Loading…
Reference in New Issue