Skip to content

Commit

Permalink
Prepare react-dom-factories for publishing (facebook#9823)
Browse files Browse the repository at this point in the history
* Prepare `react-dom-factories` for publishing

**what is the change?:**
- copies the `React.DOM.*` factory helpers into the package and wraps
  them with an IIFE
- set peerDependency on React to latest 15 version

**why make this change?:**
We are deprecating `React.DOM.*` and this provides a fallback option for
those using it.

We just copied the code in order to avoid a circular dependency, which
keeps complexity down since we are supporting every possible build
system.

**test plan:**
TODO -
1. Copy this into one of our fixtures using a UMD/AMD build and see if
   it works there.
2. Do an initial publish of the package on npm and then pull it into
   CRA, and try it there.
3. Try it in https://github.com/duncanbeevers/jade-react or some other
   project that actually uses the `React.DOM.*` helpers, using the
   related codemod.

**issue:**
facebook#9398

* Fix lints and capitalization of 'reactDOMFactories'

**what is the change?:**
Fixing nits in capitalization, quotes, and defined globals

**why make this change?:**
To get CI passing, consistency, correctness

**test plan:**
see prev. commit

**issue:**
facebook#9398
  • Loading branch information
flarnie committed Jun 7, 2017
1 parent a17dc9c commit 748d3c5
Show file tree
Hide file tree
Showing 2 changed files with 189 additions and 3 deletions.
188 changes: 187 additions & 1 deletion packages/react-dom-factories/index.js
@@ -1,3 +1,189 @@
'use strict';

module.exports = require('./lib/ReactDOMFactories');
/**
* Copyright 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/

(function(f) {
if (typeof exports === 'object' && typeof module !== 'undefined') {
module.exports = f(require('react'));
/* global define */
} else if (typeof define === 'function' && define.amd) {
define(['react'], f);
} else {
var g;
if (typeof window !== 'undefined') {
g = window;
} else if (typeof global !== 'undefined') {
g = global;
} else if (typeof self !== 'undefined') {
g = self;
} else {
g = this;
}

if (typeof g.React === 'undefined') {
throw Error('React module should be required before ReactDOMFactories');
}

g.ReactDOMFactories = f(g.React);
}
})(function(React) {
/**
* Create a factory that creates HTML tag elements.
*/
var createDOMFactory = React.createFactory;

/**
* Creates a mapping from supported HTML tags to `ReactDOMComponent` classes.
*/
var ReactDOMFactories = {
a: createDOMFactory('a'),
abbr: createDOMFactory('abbr'),
address: createDOMFactory('address'),
area: createDOMFactory('area'),
article: createDOMFactory('article'),
aside: createDOMFactory('aside'),
audio: createDOMFactory('audio'),
b: createDOMFactory('b'),
base: createDOMFactory('base'),
bdi: createDOMFactory('bdi'),
bdo: createDOMFactory('bdo'),
big: createDOMFactory('big'),
blockquote: createDOMFactory('blockquote'),
body: createDOMFactory('body'),
br: createDOMFactory('br'),
button: createDOMFactory('button'),
canvas: createDOMFactory('canvas'),
caption: createDOMFactory('caption'),
cite: createDOMFactory('cite'),
code: createDOMFactory('code'),
col: createDOMFactory('col'),
colgroup: createDOMFactory('colgroup'),
data: createDOMFactory('data'),
datalist: createDOMFactory('datalist'),
dd: createDOMFactory('dd'),
del: createDOMFactory('del'),
details: createDOMFactory('details'),
dfn: createDOMFactory('dfn'),
dialog: createDOMFactory('dialog'),
div: createDOMFactory('div'),
dl: createDOMFactory('dl'),
dt: createDOMFactory('dt'),
em: createDOMFactory('em'),
embed: createDOMFactory('embed'),
fieldset: createDOMFactory('fieldset'),
figcaption: createDOMFactory('figcaption'),
figure: createDOMFactory('figure'),
footer: createDOMFactory('footer'),
form: createDOMFactory('form'),
h1: createDOMFactory('h1'),
h2: createDOMFactory('h2'),
h3: createDOMFactory('h3'),
h4: createDOMFactory('h4'),
h5: createDOMFactory('h5'),
h6: createDOMFactory('h6'),
head: createDOMFactory('head'),
header: createDOMFactory('header'),
hgroup: createDOMFactory('hgroup'),
hr: createDOMFactory('hr'),
html: createDOMFactory('html'),
i: createDOMFactory('i'),
iframe: createDOMFactory('iframe'),
img: createDOMFactory('img'),
input: createDOMFactory('input'),
ins: createDOMFactory('ins'),
kbd: createDOMFactory('kbd'),
keygen: createDOMFactory('keygen'),
label: createDOMFactory('label'),
legend: createDOMFactory('legend'),
li: createDOMFactory('li'),
link: createDOMFactory('link'),
main: createDOMFactory('main'),
map: createDOMFactory('map'),
mark: createDOMFactory('mark'),
menu: createDOMFactory('menu'),
menuitem: createDOMFactory('menuitem'),
meta: createDOMFactory('meta'),
meter: createDOMFactory('meter'),
nav: createDOMFactory('nav'),
noscript: createDOMFactory('noscript'),
object: createDOMFactory('object'),
ol: createDOMFactory('ol'),
optgroup: createDOMFactory('optgroup'),
option: createDOMFactory('option'),
output: createDOMFactory('output'),
p: createDOMFactory('p'),
param: createDOMFactory('param'),
picture: createDOMFactory('picture'),
pre: createDOMFactory('pre'),
progress: createDOMFactory('progress'),
q: createDOMFactory('q'),
rp: createDOMFactory('rp'),
rt: createDOMFactory('rt'),
ruby: createDOMFactory('ruby'),
s: createDOMFactory('s'),
samp: createDOMFactory('samp'),
script: createDOMFactory('script'),
section: createDOMFactory('section'),
select: createDOMFactory('select'),
small: createDOMFactory('small'),
source: createDOMFactory('source'),
span: createDOMFactory('span'),
strong: createDOMFactory('strong'),
style: createDOMFactory('style'),
sub: createDOMFactory('sub'),
summary: createDOMFactory('summary'),
sup: createDOMFactory('sup'),
table: createDOMFactory('table'),
tbody: createDOMFactory('tbody'),
td: createDOMFactory('td'),
textarea: createDOMFactory('textarea'),
tfoot: createDOMFactory('tfoot'),
th: createDOMFactory('th'),
thead: createDOMFactory('thead'),
time: createDOMFactory('time'),
title: createDOMFactory('title'),
tr: createDOMFactory('tr'),
track: createDOMFactory('track'),
u: createDOMFactory('u'),
ul: createDOMFactory('ul'),
var: createDOMFactory('var'),
video: createDOMFactory('video'),
wbr: createDOMFactory('wbr'),

// SVG
circle: createDOMFactory('circle'),
clipPath: createDOMFactory('clipPath'),
defs: createDOMFactory('defs'),
ellipse: createDOMFactory('ellipse'),
g: createDOMFactory('g'),
image: createDOMFactory('image'),
line: createDOMFactory('line'),
linearGradient: createDOMFactory('linearGradient'),
mask: createDOMFactory('mask'),
path: createDOMFactory('path'),
pattern: createDOMFactory('pattern'),
polygon: createDOMFactory('polygon'),
polyline: createDOMFactory('polyline'),
radialGradient: createDOMFactory('radialGradient'),
rect: createDOMFactory('rect'),
stop: createDOMFactory('stop'),
svg: createDOMFactory('svg'),
text: createDOMFactory('text'),
tspan: createDOMFactory('tspan'),
};

// due to wrapper and conditionals at the top, this will either become
// `module.exports ReactDOMFactories` if that is available,
// otherwise it will be defined via `define(['react'], ReactDOMFactories)`
// if that is available,
// otherwise it will be defined as global variable.
return ReactDOMFactories;
});

4 changes: 2 additions & 2 deletions packages/react-dom-factories/package.json
@@ -1,6 +1,6 @@
{
"name": "react-dom-factories",
"version": "16.0.0-alpha",
"version": "1.0-alpha",
"description": "React package for DOM factory methods.",
"main": "index.js",
"repository": "facebook/react",
Expand All @@ -13,7 +13,7 @@
},
"homepage": "https://facebook.github.io/react/",
"peerDependencies": {
"react": "^16.0.0-alpha"
"react": "^15.5.4"
},
"files": [
"LICENSE",
Expand Down

0 comments on commit 748d3c5

Please sign in to comment.