react-markup 1.1.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{LICENSE.txt → LICENSE} +2 -3
- package/README.md +4 -120
- package/index.js +12 -0
- package/package.json +22 -26
- package/.npmignore +0 -83
- package/lib/index.js +0 -115
package/{LICENSE.txt → LICENSE}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
MIT License
|
|
2
2
|
|
|
3
|
-
Copyright (c)
|
|
3
|
+
Copyright (c) Facebook, Inc. and its affiliates.
|
|
4
4
|
|
|
5
5
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
6
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -19,4 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
|
19
19
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
20
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
21
|
SOFTWARE.
|
|
22
|
-
|
package/README.md
CHANGED
|
@@ -1,123 +1,7 @@
|
|
|
1
|
-
# react-markup
|
|
2
|
-
[](https://travis-ci.org/koluch/react-markup)
|
|
1
|
+
# `react-markup`
|
|
3
2
|
|
|
4
|
-
|
|
5
|
-
JSX, like this:
|
|
3
|
+
Work in progress. Check the `react-markup@experimental` and `react-markup@experimental` instead.
|
|
6
4
|
|
|
7
|
-
|
|
8
|
-
import {h} from 'react-markup'
|
|
5
|
+
## Thanks
|
|
9
6
|
|
|
10
|
-
|
|
11
|
-
h("div#header.highlighted.hover",
|
|
12
|
-
h("div.title", "People List")
|
|
13
|
-
),
|
|
14
|
-
h("div.body", people.map( person => (
|
|
15
|
-
h("div.person", {key:person.id}, person.name)
|
|
16
|
-
))),
|
|
17
|
-
h("div#footer.hidden", "(footer content)")
|
|
18
|
-
)
|
|
19
|
-
|
|
20
|
-
// which analogue in JSX is:
|
|
21
|
-
<div>
|
|
22
|
-
<div id="header" className="highlighted hover">
|
|
23
|
-
<div>People list</div>
|
|
24
|
-
</div>
|
|
25
|
-
<div className="body">
|
|
26
|
-
{
|
|
27
|
-
people.map( person => (
|
|
28
|
-
<div className="person" key={person.id}>{person.name}</div>
|
|
29
|
-
)))
|
|
30
|
-
}
|
|
31
|
-
</div>
|
|
32
|
-
<div id="footer" className="hidden">(footer content)</div>
|
|
33
|
-
</div>
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
## Installation
|
|
37
|
-
```
|
|
38
|
-
npm install --save react-markup
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
## Motivation
|
|
42
|
-
|
|
43
|
-
Facebook developers encourage everybody use JSX in React code. However, this approach has several disadvantages:
|
|
44
|
-
|
|
45
|
-
- a lot of IDE's and text editors, which support JS syntax, work bad with JSX syntax
|
|
46
|
-
|
|
47
|
-
- it could be harder to properly set up your build process to transpile from JSX and from ES6 at the same time
|
|
48
|
-
|
|
49
|
-
- some people think, that mix of JS and JSX is harder to read
|
|
50
|
-
|
|
51
|
-
## Advantages
|
|
52
|
-
|
|
53
|
-
This library was inspired by different hyperscript-like libraries, including
|
|
54
|
-
[react-hyperscript](https://github.com/mlmorg/react-hyperscript) and
|
|
55
|
-
[virtual-hyperscript](https://github.com/Raynos/virtual-hyperscript), but it has several advantages:
|
|
56
|
-
|
|
57
|
-
* it is possible to pass child elements as array and as varargs, and semantic of these methods corresponds
|
|
58
|
-
to React.createElements semantics (e. g. it requires to pass key property for children, passed as array);
|
|
59
|
-
|
|
60
|
-
* it doesn't mutate properties (which is not true for [react-hyperscript](https://github.com/mlmorg/react-hyperscript));
|
|
61
|
-
|
|
62
|
-
* it faster than analogues.
|
|
63
|
-
|
|
64
|
-
## More examples
|
|
65
|
-
|
|
66
|
-
Simple element:
|
|
67
|
-
|
|
68
|
-
```js
|
|
69
|
-
// JSX
|
|
70
|
-
<div>Text content</div>
|
|
71
|
-
|
|
72
|
-
// react-markup
|
|
73
|
-
h('div', 'Text content')
|
|
74
|
-
// ...or
|
|
75
|
-
div('Text content')
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
Div with class and id
|
|
79
|
-
```js
|
|
80
|
-
// JSX
|
|
81
|
-
<div className='highlighted' id='header'>
|
|
82
|
-
Text content
|
|
83
|
-
</div>
|
|
84
|
-
|
|
85
|
-
// react-markup
|
|
86
|
-
h('div#header.highlighted',
|
|
87
|
-
'Text content'
|
|
88
|
-
)
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
Passing children as varargs
|
|
92
|
-
|
|
93
|
-
```js
|
|
94
|
-
// JSX
|
|
95
|
-
<div className='container'>
|
|
96
|
-
<div>Header</div>
|
|
97
|
-
<div>Body</div>
|
|
98
|
-
</div>
|
|
99
|
-
|
|
100
|
-
// react-markup
|
|
101
|
-
h('div.container',
|
|
102
|
-
h('div', 'Header'),
|
|
103
|
-
h('div', 'Body'),
|
|
104
|
-
)
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
Passing children as array
|
|
108
|
-
|
|
109
|
-
```js
|
|
110
|
-
// JSX
|
|
111
|
-
<div className='container'>
|
|
112
|
-
{
|
|
113
|
-
items.map(x => (
|
|
114
|
-
<div key={x.id}>{x.title}<div>
|
|
115
|
-
))
|
|
116
|
-
}
|
|
117
|
-
</div>
|
|
118
|
-
|
|
119
|
-
// react-markup
|
|
120
|
-
h('div.container', items.map(x => (
|
|
121
|
-
h('div', {key:x.id}, x.title)
|
|
122
|
-
)))
|
|
123
|
-
```
|
|
7
|
+
The React team thanks [Nikolai Mavrenkov](https://www.koluch.ru/) for donating the `react-markup` package name.
|
package/index.js
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
* @flow
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
throw new Error(
|
|
11
|
+
'This is not a working version of react-markup. Make sure to use a later version.',
|
|
12
|
+
);
|
package/package.json
CHANGED
|
@@ -1,34 +1,30 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-markup",
|
|
3
|
-
"version": "
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
"keywords": [
|
|
7
|
-
"react",
|
|
8
|
-
"markup",
|
|
9
|
-
"html",
|
|
10
|
-
"hyperscript"
|
|
11
|
-
],
|
|
12
|
-
"author": "Nikolai Mavrenkov <koluch@koluch.ru> (http://koluch.ru/)",
|
|
13
|
-
"bugs": {
|
|
14
|
-
"url": "https://github.com/koluch/react-markup/issues",
|
|
15
|
-
"email": "koluch@koluch.ru"
|
|
16
|
-
},
|
|
17
|
-
"license": "MIT",
|
|
3
|
+
"version": "2.0.0",
|
|
4
|
+
"description": "React package generating embedded markup such as e-mails with support for Server Components.",
|
|
5
|
+
"main": "index.js",
|
|
18
6
|
"repository": {
|
|
19
7
|
"type": "git",
|
|
20
|
-
"url": "https://github.com/
|
|
21
|
-
|
|
22
|
-
"scripts": {
|
|
23
|
-
"test": "./node_modules/.bin/mocha"
|
|
8
|
+
"url": "https://github.com/facebook/react.git",
|
|
9
|
+
"directory": "packages/react-markup"
|
|
24
10
|
},
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
|
|
28
|
-
|
|
11
|
+
"keywords": [
|
|
12
|
+
"react"
|
|
13
|
+
],
|
|
14
|
+
"license": "MIT",
|
|
15
|
+
"bugs": {
|
|
16
|
+
"url": "https://github.com/facebook/react/issues"
|
|
29
17
|
},
|
|
30
|
-
"
|
|
31
|
-
|
|
32
|
-
"
|
|
18
|
+
"homepage": "https://react.dev/",
|
|
19
|
+
"files": [
|
|
20
|
+
"LICENSE",
|
|
21
|
+
"README.md",
|
|
22
|
+
"index.js"
|
|
23
|
+
],
|
|
24
|
+
"exports": {
|
|
25
|
+
".": {
|
|
26
|
+
"default": "./index.js"
|
|
27
|
+
},
|
|
28
|
+
"./package.json": "./package.json"
|
|
33
29
|
}
|
|
34
30
|
}
|
package/.npmignore
DELETED
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
# Created by .ignore support plugin (hsz.mobi)
|
|
2
|
-
### JetBrains template
|
|
3
|
-
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio
|
|
4
|
-
|
|
5
|
-
*.iml
|
|
6
|
-
|
|
7
|
-
## Directory-based project format:
|
|
8
|
-
.idea/
|
|
9
|
-
# if you remove the above rule, at least ignore the following:
|
|
10
|
-
|
|
11
|
-
# User-specific stuff:
|
|
12
|
-
# .idea/workspace.xml
|
|
13
|
-
# .idea/tasks.xml
|
|
14
|
-
# .idea/dictionaries
|
|
15
|
-
|
|
16
|
-
# Sensitive or high-churn files:
|
|
17
|
-
# .idea/dataSources.ids
|
|
18
|
-
# .idea/dataSources.xml
|
|
19
|
-
# .idea/sqlDataSources.xml
|
|
20
|
-
# .idea/dynamic.xml
|
|
21
|
-
# .idea/uiDesigner.xml
|
|
22
|
-
|
|
23
|
-
# Gradle:
|
|
24
|
-
# .idea/gradle.xml
|
|
25
|
-
# .idea/libraries
|
|
26
|
-
|
|
27
|
-
# Mongo Explorer plugin:
|
|
28
|
-
# .idea/mongoSettings.xml
|
|
29
|
-
|
|
30
|
-
## File-based project format:
|
|
31
|
-
*.ipr
|
|
32
|
-
*.iws
|
|
33
|
-
|
|
34
|
-
## Plugin-specific files:
|
|
35
|
-
|
|
36
|
-
# IntelliJ
|
|
37
|
-
/out/
|
|
38
|
-
|
|
39
|
-
# mpeltonen/sbt-idea plugin
|
|
40
|
-
.idea_modules/
|
|
41
|
-
|
|
42
|
-
# JIRA plugin
|
|
43
|
-
atlassian-ide-plugin.xml
|
|
44
|
-
|
|
45
|
-
# Crashlytics plugin (for Android Studio and IntelliJ)
|
|
46
|
-
com_crashlytics_export_strings.xml
|
|
47
|
-
crashlytics.properties
|
|
48
|
-
crashlytics-build.properties
|
|
49
|
-
### Node template
|
|
50
|
-
# Logs
|
|
51
|
-
logs
|
|
52
|
-
*.log
|
|
53
|
-
npm-debug.log*
|
|
54
|
-
|
|
55
|
-
# Runtime data
|
|
56
|
-
pids
|
|
57
|
-
*.pid
|
|
58
|
-
*.seed
|
|
59
|
-
|
|
60
|
-
# Directory for instrumented libs generated by jscoverage/JSCover
|
|
61
|
-
lib-cov
|
|
62
|
-
|
|
63
|
-
# Coverage directory used by tools like istanbul
|
|
64
|
-
coverage
|
|
65
|
-
|
|
66
|
-
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
|
67
|
-
.grunt
|
|
68
|
-
|
|
69
|
-
# node-waf configuration
|
|
70
|
-
.lock-wscript
|
|
71
|
-
|
|
72
|
-
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
|
73
|
-
build/Release
|
|
74
|
-
|
|
75
|
-
# Dependency directory
|
|
76
|
-
# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
|
|
77
|
-
node_modules
|
|
78
|
-
|
|
79
|
-
# Tests directory
|
|
80
|
-
test
|
|
81
|
-
|
|
82
|
-
# Travis config
|
|
83
|
-
.travis.yml
|
package/lib/index.js
DELETED
|
@@ -1,115 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
/**
|
|
3
|
-
* Copyright (c) 2016 Nikolai Mavrenkov <koluch@koluch.ru>
|
|
4
|
-
*
|
|
5
|
-
* Distributed under the MIT License (See accompanying file LICENSE or copy at http://opensource.org/licenses/MIT).
|
|
6
|
-
*
|
|
7
|
-
* Created: 05.03.2016 19:34
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
var React = require('react')
|
|
11
|
-
require('es6-object-assign').polyfill();
|
|
12
|
-
|
|
13
|
-
var classNameRegexp = /\./g;
|
|
14
|
-
var len, i, j
|
|
15
|
-
|
|
16
|
-
exports.h = function () {
|
|
17
|
-
|
|
18
|
-
len = arguments.length
|
|
19
|
-
var args = new Array(len)
|
|
20
|
-
for (len = arguments.length, i = 0; i < len; ++i) {
|
|
21
|
-
args[i] = arguments[i];
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
var tag = args[0];
|
|
25
|
-
var props = null
|
|
26
|
-
var children = null
|
|
27
|
-
|
|
28
|
-
if (args.length > 1) {
|
|
29
|
-
if (args[1] === null
|
|
30
|
-
|| typeof(args[1]) === "undefined"
|
|
31
|
-
|| typeof(args[1]) === "string"
|
|
32
|
-
|| typeof(args[1]) === "number"
|
|
33
|
-
|| typeof(args[1]) === "boolean"
|
|
34
|
-
|| React.isValidElement(args[1])
|
|
35
|
-
|| args[1].constructor === Array) {
|
|
36
|
-
children = new Array(args.length - 1)
|
|
37
|
-
for(i = 1, len = args.length; i < len; ++i) {
|
|
38
|
-
children[i - 1] = args[i]
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
else {
|
|
42
|
-
props = args[1]
|
|
43
|
-
children = new Array(args.length - 2)
|
|
44
|
-
for(i = 2, len = args.length; i < len; ++i) {
|
|
45
|
-
children[i - 2] = args[i]
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
else {
|
|
50
|
-
children = new Array(args.length - 1)
|
|
51
|
-
for(i = 1, len = args.length; i < len; ++i) {
|
|
52
|
-
children[i - 1] = args[i]
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
if (typeof tag === "string") {
|
|
57
|
-
var typeProps = {}
|
|
58
|
-
if (tag.indexOf(".") != -1) {
|
|
59
|
-
typeProps.className = tag.substring(tag.indexOf(".") + 1).replace(classNameRegexp," ");
|
|
60
|
-
tag = tag.substring(0, tag.indexOf("."))
|
|
61
|
-
}
|
|
62
|
-
if (tag.indexOf("#") != -1) {
|
|
63
|
-
typeProps.id = tag.substring(tag.indexOf("#") + 1)
|
|
64
|
-
tag = tag.substring(0, tag.indexOf("#"))
|
|
65
|
-
}
|
|
66
|
-
if (typeProps != null) {
|
|
67
|
-
props = Object.assign(typeProps, props)
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
len = children.length
|
|
72
|
-
var reactArgs = new Array(children.length + 2)
|
|
73
|
-
reactArgs[0] = tag
|
|
74
|
-
reactArgs[1] = props
|
|
75
|
-
for(i = 0; i < len; ++i) {
|
|
76
|
-
reactArgs[i + 2] = children[i]
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
return React.createElement.apply(undefined, reactArgs)
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
// Create helpers
|
|
83
|
-
exports.a = exports.abbr = exports.acronym = exports.address = exports.applet = exports.area = exports.article
|
|
84
|
-
= exports.aside = exports.audio = exports.b = exports.base = exports.basefont = exports.bdi = exports.bdo
|
|
85
|
-
= exports.big = exports.blockquote = exports.body = exports.br = exports.button = exports.canvas
|
|
86
|
-
= exports.caption = exports.center = exports.cite = exports.code = exports.col = exports.colgroup
|
|
87
|
-
= exports.datalist = exports.dd = exports.del = exports.details = exports.dfn = exports.dialog
|
|
88
|
-
= exports.dir = exports.div = exports.dl = exports.dt = exports.em = exports.embed = exports.fieldset
|
|
89
|
-
= exports.figcaption = exports.figure = exports.font = exports.footer = exports.form = exports.frame
|
|
90
|
-
= exports.frameset = exports.h1 = exports.h2 = exports.h3 = exports.h4 = exports.h5 = exports.h6
|
|
91
|
-
= exports.head = exports.header = exports.hr = exports.html = exports.i = exports.iframe = exports.img
|
|
92
|
-
= exports.input = exports.ins = exports.kbd = exports.keygen = exports.label = exports.legend = exports.li
|
|
93
|
-
= exports.link = exports.main = exports.map = exports.mark = exports.menu = exports.menuitem = exports.meta
|
|
94
|
-
= exports.meter = exports.nav = exports.noframes = exports.noscript = exports.object = exports.ol
|
|
95
|
-
= exports.optgroup = exports.option = exports.output = exports.p = exports.param = exports.pre = exports.progress
|
|
96
|
-
= exports.q = exports.rp = exports.rt = exports.ruby = exports.s = exports.samp = exports.script
|
|
97
|
-
= exports.section = exports.select = exports.small = exports.source = exports.span = exports.strike
|
|
98
|
-
= exports.strong = exports.style = exports.sub = exports.summary = exports.sup = exports.table
|
|
99
|
-
= exports.tbody = exports.td = exports.textarea = exports.tfoot = exports.th = exports.thead = exports.time
|
|
100
|
-
= exports.title = exports.tr = exports.track = exports.tt = exports.u = exports.ul = exports.var
|
|
101
|
-
= exports.video = exports.wb = function(){}
|
|
102
|
-
|
|
103
|
-
for(let tag in exports) {
|
|
104
|
-
if(tag !== "h") {
|
|
105
|
-
exports[tag] = function() {
|
|
106
|
-
len = arguments.length
|
|
107
|
-
var args = new Array(len + 1);
|
|
108
|
-
for (j = 0; j < len; j++) {
|
|
109
|
-
args[j + 1] = arguments[j];
|
|
110
|
-
}
|
|
111
|
-
args[0] = tag
|
|
112
|
-
return module.exports.h.apply(undefined, args);
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
}
|