|
70 |
71 | |
74 | 75 | 76 | React HN Benchmark 77 | new 78 | {" | "} 79 | comments 80 | {" | "} 81 | show 82 | {" | "} 83 | ask 84 | {" | "} 85 | jobs 86 | {" | "} 87 | submit 88 | 89 | | 90 |
Hello world
5 | }
6 |
7 | Component.compileRootComponent = true;
8 |
9 | module.exports = Component;
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-compiler",
3 | "version": "1.0.0",
4 | "description": "React compiler project",
5 | "main": "index.js",
6 | "scripts": {
7 | "build": "babel src --out-dir lib --source-maps",
8 | "watch": "babel src scripts --out-dir lib --watch --source-maps --verbose",
9 | "test-ssr": "babel-node --expose-gc scripts/test.js --mode=ssr",
10 | "test-dom": "babel-node --expose-gc scripts/test.js --mode=dom",
11 | "test": "yarn test-ssr",
12 | "sandbox": "node lib/cli.js --entry=node-sandbox/App.js"
13 | },
14 | "author": "Dominic Gannaway",
15 | "license": "MIT",
16 | "dependencies": {
17 | "@babel/core": "^7.1.5",
18 | "@babel/generator": "^7.1.6",
19 | "@babel/parser": "^7.1.6",
20 | "@babel/preset-env": "^7.1.6",
21 | "@babel/traverse": "^7.1.6",
22 | "@babel/types": "^7.1.5",
23 | "chalk": "^2.4.1"
24 | },
25 | "devDependencies": {
26 | "@babel/cli": "^7.1.5",
27 | "@babel/node": "^7.2.2",
28 | "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
29 | "@babel/plugin-transform-flow-strip-types": "^7.0.0",
30 | "@babel/plugin-transform-modules-commonjs": "^7.1.0",
31 | "@babel/plugin-transform-react-jsx": "^7.1.6",
32 | "@babel/preset-flow": "^7.0.0",
33 | "@babel/preset-react": "^7.0.0",
34 | "@babel/register": "^7.0.0",
35 | "babel-eslint": "^10.0.1",
36 | "eslint": "^5.9.0",
37 | "eslint-plugin-babel": "^5.2.1",
38 | "eslint-plugin-flow-header": "^0.2.0",
39 | "eslint-plugin-flowtype": "^3.2.0",
40 | "eslint-plugin-header": "^2.0.0",
41 | "eslint-plugin-prettier": "^3.0.0",
42 | "glob": "^7.1.3",
43 | "google-closure-compiler": "^20190121.0.0",
44 | "jsdom": "^13.0.0",
45 | "prettier": "^1.15.2",
46 | "react": "^16.8.0",
47 | "react-compiler-runtime": "file:scripts/compiler-runtime",
48 | "react-dom": "^16.8.0",
49 | "simple-html-dom-parser": "^1.1.2",
50 | "tmp": "^0.0.33"
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/scripts/compiler-runtime/index.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const REACT_CONTEXT_TYPE = Symbol.for("react.context");
4 | const REACT_PROVIDER_TYPE = Symbol.for("react.context");
5 |
6 | export const currentDispatcher = {
7 | current: null,
8 | };
9 |
10 | function resolveDispatcher() {
11 | const dispatcher = currentDispatcher.current;
12 | if (dispatcher === null) {
13 | throw new Error("Hooks can only be called inside the body of a function component.");
14 | }
15 | return dispatcher;
16 | }
17 |
18 | export function useState(initialState) {
19 | const dispatcher = resolveDispatcher();
20 | return dispatcher.useState(initialState);
21 | }
22 |
23 | export function useReducer(reducer, initialState, initialAction) {
24 | const dispatcher = resolveDispatcher();
25 | return dispatcher.useReducer(reducer, initialState, initialAction);
26 | }
27 |
28 | export function createContext(defaultValue, calculateChangedBits) {
29 | if (calculateChangedBits === undefined) {
30 | calculateChangedBits = null;
31 | }
32 | const context = {
33 | $$typeof: REACT_CONTEXT_TYPE,
34 | _calculateChangedBits: calculateChangedBits,
35 | // As a workaround to support multiple concurrent renderers, we categorize
36 | // some renderers as primary and others as secondary. We only expect
37 | // there to be two concurrent renderers at most: React Native (primary) and
38 | // Fabric (secondary); React DOM (primary) and React ART (secondary).
39 | // Secondary renderers store their context values on separate fields.
40 | _currentValue: defaultValue,
41 | _currentValue2: defaultValue,
42 | // Used to track how many concurrent renderers this context currently
43 | // supports within in a single renderer. Such as parallel server rendering.
44 | _threadCount: 0,
45 | // These are circular
46 | Provider: null,
47 | Consumer: null,
48 | };
49 | context.Provider = {
50 | $$typeof: REACT_PROVIDER_TYPE,
51 | _context: context,
52 | };
53 | context.Consumer = context;
54 | return context;
55 | }
56 |
57 | export function createVNode(t, v, k) {
58 | return {
59 | f: null,
60 | k: k === undefined ? null : k,
61 | t,
62 | v: v || null,
63 | };
64 | }
65 |
--------------------------------------------------------------------------------
/scripts/compiler-runtime/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-compuler-runtime",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "author": "Dominic Gannaway",
7 | "license": "MIT",
8 | "dependencies": {
9 | "react": "^16.7.0-alpha.0"
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/scripts/compiler-runtime/ssr-dispatcher.js:
--------------------------------------------------------------------------------
1 | let firstWorkInProgressHook = null;
2 | let currentlyRenderingComputeFunction = null;
3 | let isReRender = false;
4 | let workInProgressHook = null;
5 |
6 | function resolveCurrentlyRenderingFiber() {
7 | if (currentlyRenderingComputeFunction === null) {
8 | throw new Error("Hooks can only be called inside the body of a function component.");
9 | }
10 | return currentlyRenderingComputeFunction;
11 | }
12 |
13 | function createHook() {
14 | return {
15 | memoizedState: null,
16 | queue: null,
17 | next: null,
18 | };
19 | }
20 |
21 | function createWorkInProgressHook() {
22 | if (workInProgressHook === null) {
23 | // This is the first hook in the list
24 | if (firstWorkInProgressHook === null) {
25 | isReRender = false;
26 | firstWorkInProgressHook = workInProgressHook = createHook();
27 | } else {
28 | // There's already a work-in-progress. Reuse it.
29 | isReRender = true;
30 | workInProgressHook = firstWorkInProgressHook;
31 | }
32 | } else {
33 | if (workInProgressHook.next === null) {
34 | isReRender = false;
35 | // Append to the end of the list
36 | workInProgressHook = workInProgressHook.next = createHook();
37 | } else {
38 | // There's already a work-in-progress. Reuse it.
39 | isReRender = true;
40 | workInProgressHook = workInProgressHook.next;
41 | }
42 | }
43 | return workInProgressHook;
44 | }
45 |
46 | function basicStateReducer(state, action) {
47 | return typeof action === "function" ? action(state) : action;
48 | }
49 |
50 | function useReducer(reducer, initialState, initialAction) {
51 | resolveCurrentlyRenderingFiber();
52 | workInProgressHook = createWorkInProgressHook();
53 | if (isReRender) {
54 | throw new Error("TODO");
55 | } else {
56 | if (reducer === basicStateReducer) {
57 | // Special case for `useState`.
58 | if (typeof initialState === "function") {
59 | initialState = initialState();
60 | }
61 | } else if (initialAction !== undefined && initialAction !== null) {
62 | initialState = reducer(initialState, initialAction);
63 | }
64 | workInProgressHook.memoizedState = initialState;
65 | const dispatch = () => {
66 | throw new Error("TODO");
67 | };
68 | return [workInProgressHook.memoizedState, dispatch];
69 | }
70 | }
71 |
72 | function useState(initialState) {
73 | return useReducer(basicStateReducer, initialState);
74 | }
75 |
76 | export function prepareToUseHooks(currentComputeFunction) {
77 | currentlyRenderingComputeFunction = currentComputeFunction;
78 | }
79 |
80 | export function finishHooks() {
81 | firstWorkInProgressHook = null;
82 | currentlyRenderingComputeFunction = null;
83 | isReRender = false;
84 | workInProgressHook = null;
85 | }
86 |
87 | export const Dispatcher = {
88 | useReducer,
89 | useState,
90 | };
91 |
--------------------------------------------------------------------------------
/scripts/test-externs.js:
--------------------------------------------------------------------------------
1 | // This is an externs file used for Google Closure Compiler advanced mode
2 | var module = {};
3 | var document = {};
4 | function require() {}
--------------------------------------------------------------------------------
/src/cli.js:
--------------------------------------------------------------------------------
1 | import { compileEntryModuleFileToDirectory } from "./compiler";
2 | import { resolve } from "path";
3 | import minimist from "minimist";
4 |
5 | const argv = minimist(process.argv.slice(2));
6 | const entry = argv.entry;
7 | const options = {};
8 |
9 | if (entry !== undefined) {
10 | try {
11 | compileEntryModuleFileToDirectory(resolve(entry), options);
12 | } catch (e) {
13 | console.error(e.stack);
14 | process.exit(1);
15 | }
16 | } else {
17 | console.error(
18 | `The compiler CLI requires an --entry argument.\n\n1: The entry must be the path to a root React component that you want to compile.\n\nFor example: "react-compiler --entry=src/MyApp.js"\n`,
19 | );
20 | process.exit(1);
21 | }
22 |
--------------------------------------------------------------------------------
/src/deadcode.js:
--------------------------------------------------------------------------------
1 | import {
2 | isNodeWithinReactElementTemplate,
3 | removePath,
4 | wasParentPathFlaggedWithDCE,
5 | wasParentPathRemoved,
6 | isReactObject,
7 | } from "./utils";
8 | import traverse from "@babel/traverse";
9 | import * as t from "@babel/types";
10 |
11 | function filterReferencePaths(path, state) {
12 | // If the node is used, then we need this path
13 | if (path.node.used) {
14 | return true;
15 | }
16 | if (path.node.canDCE) {
17 | return false;
18 | }
19 | const parentPath = path.parentPath;
20 | if (
21 | t.isMemberExpression(parentPath.node) &&
22 | (isReactObject(parentPath.get("object"), state) &&
23 | ((t.isIdentifier(parentPath.node.property) && parentPath.node.property.name === "createElement") ||
24 | (t.isStringLiteral(parentPath.node.property) && parentPath.node.property.value === "createElement")))
25 | ) {
26 | return false;
27 | }
28 | // Ignore React.Node types referencing React
29 | if (t.isQualifiedTypeIdentifier(path.container)) {
30 | return false;
31 | }
32 | if (isNodeWithinReactElementTemplate(path, state)) {
33 | return false;
34 | }
35 | if (wasParentPathRemoved(path)) {
36 | return false;
37 | }
38 | if (wasParentPathFlaggedWithDCE(path)) {
39 | return false;
40 | }
41 | return true;
42 | }
43 |
44 | // This isn't a thorough dead code removal tool. It's designed to complement
45 | // other tools such as Google Closure Compiler, so they can do a better job.
46 | export function applyDeadCodeElimination(moduleAst, moduleState) {
47 | const deadCodePasses = 3;
48 | for (let i = 0; i < deadCodePasses; i++) {
49 | // Second pass, remove unused identifiers and convert member expressions to computed
50 | traverse(moduleAst, {
51 | FunctionExpression(path) {
52 | // Remove dangling expressions that aren't referenced or used by anything.
53 | // This can occur because of the logic in createPropTemplateForFunctionExpression
54 | if (
55 | path.node.id === null &&
56 | t.isExpressionStatement(path.parentPath) &&
57 | t.isBlockStatement(path.parentPath.parentPath)
58 | ) {
59 | removePath(path);
60 | }
61 | if (path.node && path.node.id === null && path.node.canDCE) {
62 | removePath(path);
63 | }
64 | },
65 | CallExpression(path) {
66 | if (path.node.canDCE) {
67 | removePath(path);
68 | }
69 | },
70 | Identifier(path) {
71 | const node = path.node;
72 |
73 | // Flag we set to ensure we don't DCE this identifier
74 | if (node.used === true) {
75 | return;
76 | }
77 | if (node === undefined) {
78 | return;
79 | }
80 | if (moduleState.externalBindings.has(node.name)) {
81 | return;
82 | }
83 |
84 | const binding = path.scope.getBinding(node.name);
85 | if (binding === undefined) {
86 | return;
87 | }
88 | // Don't attempt to remove function params right now.
89 | if (binding.kind === "param") {
90 | return;
91 | }
92 | // If this is the id of a function, skip dead coding it.
93 | if (path.key === "id" && t.isFunctionDeclaration(path.parentPath.node)) {
94 | return;
95 | }
96 | const filteredReferencePaths = binding.referencePaths.filter(p => filterReferencePaths(p, moduleState));
97 | if (filteredReferencePaths.length === 0) {
98 | node.toBeRemoved = true;
99 | // Exclude object pattern for now
100 | if (!t.isObjectPattern(binding.path.node)) {
101 | traverse(moduleAst, {
102 | AssignmentExpression(assignPath) {
103 | const assignmentNode = assignPath.node;
104 | if (t.isIdentifier(assignmentNode.left) && assignmentNode.left.name === node.name) {
105 | removePath(assignPath);
106 | }
107 | },
108 | });
109 | moduleState.applyPostTransform(() => {
110 | removePath(path);
111 | });
112 | }
113 | }
114 | },
115 | });
116 | }
117 | }
118 |
--------------------------------------------------------------------------------
/src/errors.js:
--------------------------------------------------------------------------------
1 | // This error is thrown when a false invariant is encountered. This error should never be swallowed.
2 | export class InvariantError extends Error {
3 | constructor(message: string) {
4 | super(message);
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/src/invariant.js:
--------------------------------------------------------------------------------
1 | import { InvariantError } from "./errors";
2 |
3 | export default function invariant(condition: boolean, format: string = ""): void {
4 | if (condition) return;
5 | const message = `${format}
6 | This is likely a bug or missing functionality in the compiler, not your code.`;
7 | let error = new InvariantError(message);
8 | error.name = "Invariant Violation";
9 | throw error;
10 | }
11 |
--------------------------------------------------------------------------------
/src/react/context.js:
--------------------------------------------------------------------------------
1 | import { getReferenceFromExpression, isDestructuredRef, isIdentifierReferenceConstant } from "../references";
2 | import {
3 | getCodeLocation,
4 | getRuntimeValueIndex,
5 | handleWhiteSpace,
6 | isHostComponentType,
7 | isReactCreateElement,
8 | isReactObject,
9 | markNodeAsUsed,
10 | } from "../utils";
11 | import { compileReactComputeFunction } from "./functions";
12 | import * as t from "@babel/types";
13 | import { ContextConsumerTemplateNode } from "../templates";
14 |
15 | export function compileReactContextConsumer(namePath, childrenPath, state, componentPath) {
16 | const filteredChildrenPath = childrenPath.filter(childPath => {
17 | if (t.isJSXText(childPath.node) && handleWhiteSpace(childPath.node.value) === "") {
18 | return false;
19 | }
20 | return true;
21 | });
22 | if (filteredChildrenPath.length !== 1) {
23 | throw new Error(
24 | `Compiler failed to find a single child function for - {colors.map(renderColor)}
No colors!
;
38 | }
39 | }
40 |
41 | return (
42 |
43 |
50 | );
51 | }
52 |
53 | App.compileRootComponent = true;
54 |
55 | module.exports = App;
56 |
--------------------------------------------------------------------------------
/tests/create-element/array/array.js:
--------------------------------------------------------------------------------
1 | // props:{items: [1,2,3,4,5]}
2 | var React = require("react");
3 |
4 | function Component({ items }: { items: ArrayChoose your favorite color:
44 |{renderColors(colors)}
45 |
46 | You chose:
47 |
49 | {selectedColor.name}
48 | -
7 | {items.map(
8 | (item: number): React.Node =>
9 | React.createElement(
10 | "li",
11 | {
12 | key: item,
13 | },
14 | "The item is ",
15 | item,
16 | ),
17 | )}
18 |
-
7 | {items.map(
8 | (item, i: number): React.Node => (
9 |
- Static item! 10 | ), 11 | )} 12 |
-
7 | {items.map(
8 | (item: number): React.Node => (
9 |
- The item is {item} 10 | ), 11 | )} 12 |
The text is {item.text}!
9 | - {children}
- {children}
- {children}
-
11 | {items.map(
12 | (item: number): React.Node => (
13 |
-
11 | {items.map(
12 | (item: number): React.Node => (
13 |
Hello world
5 | }
6 |
7 | Component.compileRootComponent = true;
8 |
9 | module.exports = Component;
--------------------------------------------------------------------------------
/tests/jsx/basic/basic10.js:
--------------------------------------------------------------------------------
1 | // props:{var: "This should show up!", bar: "123", cond: true, cond2: true, defaultClassName: "default-item"}
2 |
3 | var React = require("react");
4 |
5 | function foo(bar): React.Node {
6 | return [Hello world, {bar + ""}
];
7 | }
8 |
9 | function Component({
10 | cond,
11 | cond2,
12 | defaultClassName,
13 | bar
14 | }: {
15 | cond: boolean,
16 | cond2: boolean,
17 | defaultClassName: string,
18 | bar: string
19 | }) {
20 | let children = [
21 | -
42 | {children}
43 |
Hello world
7 | <>
8 | 123
9 | 456
10 |
11 | <>
12 | <>
13 | 789
14 |
15 |
16 |
17 |
18 | );
19 | }
20 |
21 | Component.compileRootComponent = true;
22 |
23 | module.exports = Component;
--------------------------------------------------------------------------------
/tests/jsx/basic/basic12.js:
--------------------------------------------------------------------------------
1 | // props:{bar: "123", cond: true, cond2: true, defaultClassName: "default-item"}
2 |
3 | var React = require("react");
4 |
5 | function foo(bar): Array-
42 | {children}
43 |
21 | {!cond && cond2 === false ? txt : numStr}
22 | alert("Haxor!")`}>
23 | {txt2}
24 | {txt3}
25 | Static text!
26 | {txt}
27 |
28 |
29 | );
30 | }
31 |
32 | Component.compileRootComponent = true;
33 |
34 | module.exports = Component;
35 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic14.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function Component() {
4 | function handleClick(e): void {
5 | e.target.textContent = "Worked!";
6 | }
7 |
8 | return Hello world
;
9 | }
10 |
11 | Component.compileRootComponent = true;
12 |
13 | module.exports = Component;
14 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic15.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function Component() {
4 | function getHandler(): (e) => void {
5 | return e => {
6 | e.target.textContent = "Worked!";
7 | };
8 | }
9 |
10 | return Hello world
11 | }
12 |
13 | Component.compileRootComponent = true;
14 |
15 | module.exports = Component;
--------------------------------------------------------------------------------
/tests/jsx/basic/basic16.js:
--------------------------------------------------------------------------------
1 | // props:{cond: false}
2 | var React = require("react");
3 |
4 | function Component({ cond }: { cond: boolean }) {
5 | const elements = [123, 456];
6 |
7 | let elements2 = [7, 8, 9];
8 |
9 | if (!cond) {
10 | elements2 = [10, 11, 12];
11 | }
12 |
13 | function getElements(): React.Node {
14 | return (
15 |
16 | {elements}
17 | {elements2}
18 |
19 | );
20 | }
21 |
22 | return {getElements()}
;
23 | }
24 |
25 | Component.compileRootComponent = true;
26 |
27 | module.exports = Component;
28 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic17.js:
--------------------------------------------------------------------------------
1 | // props:{cond1: true, cond2: false}
2 | var React = require("react");
3 |
4 | function Component({ cond1, cond2 }: { cond1: boolean, cond2: boolean }) {
5 | let className = "class1";
6 |
7 | if (cond1) {
8 | className = "class2";
9 | }
10 | if (cond2) {
11 | className = "class3";
12 | }
13 |
14 | return Hello world
;
15 | }
16 |
17 | Component.compileRootComponent = true;
18 |
19 | module.exports = Component;
20 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic18.js:
--------------------------------------------------------------------------------
1 | // props:{cond1: true, cond2: true}
2 | var React = require("react");
3 |
4 | function Component({ cond1, cond2 }: { cond1: boolean, cond2: boolean }) {
5 | let className = cond1 ? "class2" : cond2 ? "class3" : "class1";
6 |
7 | return Hello world
;
8 | }
9 |
10 | Component.compileRootComponent = true;
11 |
12 | module.exports = Component;
13 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic19.js:
--------------------------------------------------------------------------------
1 | // props:{cond1: true, cond2: true, val1: "works"}
2 | var React = require("react");
3 |
4 | function getVal2(): string {
5 | return "works2";
6 | }
7 |
8 | function Component({
9 | cond1,
10 | cond2,
11 | val1
12 | }: {
13 | cond1: boolean,
14 | cond2: boolean,
15 | val1: string
16 | }) {
17 | let className = cond1 ? val1 : cond2 ? getVal2() : "class1";
18 |
19 | return Hello world
;
20 | }
21 |
22 | Component.compileRootComponent = true;
23 |
24 | module.exports = Component;
25 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic2.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function Component() {
4 | return (
5 |
6 | Hello
7 | world
8 |
9 | );
10 | }
11 |
12 | Component.compileRootComponent = true;
13 |
14 | module.exports = Component;
15 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic20.js:
--------------------------------------------------------------------------------
1 | // props:{cond: true, cond2: false, txt: '', number: 123}
2 |
3 | var React = require("react");
4 |
5 | function Component({
6 | cond,
7 | cond2,
8 | txt,
9 | num
10 | }: {
11 | cond: boolean,
12 | cond2: boolean,
13 | txt: string,
14 | num: number
15 | }) {
16 | var numStr = num + "";
17 | var txt2 = "100".toString();
18 | var txt3 = "Hello" + "world";
19 | return (
20 |
21 | {!cond && cond2 === false ? txt : numStr}
22 | alert("Haxor!")`}>
23 | {txt2}
24 | {txt3}
25 | Static text!
26 | {txt}
27 |
28 |
29 | );
30 | }
31 |
32 | Component.compileRootComponent = true;
33 |
34 | module.exports = Component;
35 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic21.js:
--------------------------------------------------------------------------------
1 | // props:{cond: true, cond2: false, txt: '', number: 123}
2 |
3 | var React = require("react");
4 |
5 | type PropsType = {
6 | cond: boolean,
7 | cond2: boolean,
8 | txt: string,
9 | num: number,
10 | };
11 |
12 | function Component({ cond, cond2, txt, num }: PropsType) {
13 | var numStr = num + "";
14 | var txt2 = "100".toString();
15 | var txt3 = "Hello" + "world";
16 | return (
17 |
18 | {!cond && cond2 === false ? txt : numStr}
19 | alert("Haxor!")`}>
20 | {txt2}
21 | {txt3}
22 | Static text!
23 | {txt}
24 |
25 |
26 | );
27 | }
28 |
29 | Component.compileRootComponent = true;
30 |
31 | module.exports = Component;
32 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic22.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function Component2() {
4 | return Hello world!;
5 | }
6 |
7 | function Component() {
8 | return (
9 |
10 |
12 | );
13 | }
14 |
15 | Component.compileRootComponent = true;
16 |
17 | module.exports = Component;
18 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic23.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function Component2({ x }: { x: number }) {
4 | return The number is {x};
5 | }
6 |
7 | function Component() {
8 | return (
9 |
10 |
12 | );
13 | }
14 |
15 | Component.compileRootComponent = true;
16 |
17 | module.exports = Component;
18 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic24.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function Component2({ children }: { children: string }) {
4 | return The child is {children};
5 | }
6 |
7 | function Component() {
8 | return (
9 |
10 | Hello world
11 |
12 | );
13 | }
14 |
15 | Component.compileRootComponent = true;
16 |
17 | module.exports = Component;
18 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic25.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function Component2({ children }: { children: Array
10 | {[1, 2, 3]}
11 |
12 | );
13 | }
14 |
15 | Component.compileRootComponent = true;
16 |
17 | module.exports = Component;
18 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic26.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function Component2({ children }: { children: {text: string} }) {
4 | return The child is {children.text};
5 | }
6 |
7 | function Component() {
8 | return (
9 |
10 | {{text: "Hello world!"}}
11 |
12 | );
13 | }
14 |
15 | Component.compileRootComponent = true;
16 |
17 | module.exports = Component;
18 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic27.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function Component2({ children }: { children: React.Node }) {
4 | return The child is {children};
5 | }
6 |
7 | function Component() {
8 | return (
9 |
10 |
11 | Hello world
12 |
13 |
14 | );
15 | }
16 |
17 | Component.compileRootComponent = true;
18 |
19 | module.exports = Component;
20 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic28.js:
--------------------------------------------------------------------------------
1 | // props:{val: "hello world"}
2 | var React = require("react");
3 |
4 | function Component2({ children }: { children: React.Node }) {
5 | return The child is {children};
6 | }
7 |
8 | function Component({ val }: { val: string }) {
9 | return (
10 |
11 |
12 | Hello world
13 |
15 |
16 | );
17 | }
18 |
19 | Component.compileRootComponent = true;
20 |
21 | module.exports = Component;
22 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic29.js:
--------------------------------------------------------------------------------
1 | // props:{val: "hello world"}
2 | var React = require("react");
3 |
4 | function Component2({ children }: { children: Array{val}
14 |
11 |
12 | Hello world
13 |
19 |
20 | );
21 | }
22 |
23 | Component.compileRootComponent = true;
24 |
25 | module.exports = Component;
26 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic3.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function Component() {
4 | return (
5 | {val}
14 | {null}
15 | {undefined}
16 | {"Hello world"}
17 | {false}
18 |
6 |
8 | world 9 | Random text! 10 | {"More text!"} 11 | {123} 12 |123
13 |
14 | );
15 | }
16 |
17 | Component.compileRootComponent = true;
18 |
19 | module.exports = Component;
20 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic30.js:
--------------------------------------------------------------------------------
1 | // props:{val: "hello world"}
2 | var React = require("react");
3 |
4 | function Component2({ children }: { children: ArrayHello
7 | 8 | world 9 | Random text! 10 | {"More text!"} 11 | {123} 12 |
15 |
16 | Hello world
17 |
19 |
20 | );
21 | }
22 |
23 | Component.compileRootComponent = true;
24 |
25 | module.exports = Component;
26 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic31.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function Component() {
4 | return "A string!";
5 | }
6 |
7 | Component.compileRootComponent = true;
8 |
9 | module.exports = Component;
10 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic32.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function foo(): string {
4 | return "A string!";
5 | }
6 |
7 | function Component() {
8 | return foo();
9 | }
10 |
11 | Component.compileRootComponent = true;
12 |
13 | module.exports = Component;
14 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic33.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function Component2({ renderText }: { renderText: () => string }) {
4 | return The child is {renderText()};
5 | }
6 |
7 | function Component() {
8 | const renderText = function(): string {
9 | return "Hello world!";
10 | };
11 |
12 | return (
13 |
14 |
16 | );
17 | }
18 |
19 | Component.compileRootComponent = true;
20 |
21 | module.exports = Component;
22 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic34.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function Component2({ node }: { node: React.Node }) {
4 | return The child is {node};
5 | }
6 |
7 | function Component() {
8 | const node = Hello world
;
9 |
10 | return (
11 |
12 |
14 | );
15 | }
16 |
17 | Component.compileRootComponent = true;
18 |
19 | module.exports = Component;
20 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic35.js:
--------------------------------------------------------------------------------
1 | // props:{cond: true}
2 | var React = require("react");
3 |
4 | function Component2({ node }: { node: React.Node }) {
5 | return The child is {node};
6 | }
7 |
8 | function Component({ cond }: { cond: boolean }) {
9 | let node = Hello world
;
10 |
11 | if (cond) {
12 | node = This should show!;
13 | }
14 |
15 | return (
16 |
17 |
19 | );
20 | }
21 |
22 | Component.compileRootComponent = true;
23 |
24 | module.exports = Component;
25 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic36.js:
--------------------------------------------------------------------------------
1 | // props:{cond: true}
2 | var React = require("react");
3 |
4 | function Component2({ node }: { node: string }) {
5 | return The child is {node};
6 | }
7 |
8 | function Component({ cond }: { cond: boolean }) {
9 | let node = 123
10 |
11 | if (cond) {
12 | node = 456
13 | }
14 |
15 | return (
16 |
17 |
19 | );
20 | }
21 |
22 | Component.compileRootComponent = true;
23 |
24 | module.exports = Component;
25 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic37.js:
--------------------------------------------------------------------------------
1 | // props:{cond: true}
2 | var React = require("react");
3 |
4 | function Component2({ node }: { node: string }) {
5 | return The child is {node};
6 | }
7 |
8 | function Component({ cond }: { cond: boolean }) {
9 | return (
10 |
11 |
13 | );
14 | }
15 |
16 | Component.compileRootComponent = true;
17 |
18 | module.exports = Component;
19 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic38.js:
--------------------------------------------------------------------------------
1 | // props:{cond: true}
2 | var React = require("react");
3 |
4 | function Component2({ node }: { node: React.Node }) {
5 | return The child is {node};
6 | }
7 |
8 | function Component({ cond }: { cond: boolean }) {
9 | return (
10 |
11 | Hello world :
13 | );
14 | }
15 |
16 | Component.compileRootComponent = true;
17 |
18 | module.exports = Component;
19 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic39.js:
--------------------------------------------------------------------------------
1 | // props:{x: "foobar"}
2 | var React = require("react");
3 |
4 | function Component2({ children }: { children: string }) {
5 | return The child is {children};
6 | }
7 |
8 | function getText(x): string {
9 | return x.toString();
10 | }
11 |
12 | function Component({ x }: { x: string }) {
13 | return (
14 | Hello world
} />
12 |
15 | {getText(x)}
16 |
17 | );
18 | }
19 |
20 | Component.compileRootComponent = true;
21 |
22 | module.exports = Component;
23 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic4.js:
--------------------------------------------------------------------------------
1 | // props:{cond: false}
2 |
3 | var React = require("react");
4 |
5 | function Component({ cond }: { cond: boolean }) {
6 | return (
7 |
8 | {cond ? "Hello" : "Goodbye"}
9 | {``}
10 |
11 | );
12 | }
13 |
14 | Component.compileRootComponent = true;
15 |
16 | module.exports = Component;
17 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic40.js:
--------------------------------------------------------------------------------
1 | // props:{x: "foobar"}
2 | var React = require("react");
3 |
4 | function Component2({ foo, bar }: { foo: string, bar: Array
21 |
23 | );
24 | }
25 |
26 | Component.compileRootComponent = true;
27 |
28 | module.exports = Component;
29 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic41.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function Component2({ x, y, z }: { x: string, y: string, z: number }) {
4 | return (
5 | {x}
7 | {y}
8 |
21 |
23 | );
24 | }
25 |
26 | Component.compileRootComponent = true;
27 |
28 | module.exports = Component;
29 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic42.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function Component2() {
4 | return Hello world!;
5 | }
6 |
7 | function Component() {
8 | return (
9 |
10 |
14 | );
15 | }
16 |
17 | Component.compileRootComponent = true;
18 |
19 | module.exports = Component;
20 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic43.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function Component() {
4 | let val = "foo";
5 | let count = 0;
6 | let count2 = 5;
7 |
8 | val = val + "bar";
9 | val += " test";
10 | count = count + 1;
11 | count = ++count;
12 | count2 -= 1;
13 |
14 | return {val}{++count}{--count2}{typeof count}
15 | }
16 |
17 | Component.compileRootComponent = true;
18 |
19 | module.exports = Component;
20 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic44.js:
--------------------------------------------------------------------------------
1 | // props:{cond: true}
2 | var React = require("react");
3 |
4 | function Component({ cond }: { cond: boolean }) {
5 | let val = "foo";
6 | let count = 0;
7 | let count2 = 5;
8 |
9 | if (cond) {
10 | val += " test";
11 | count++;
12 | count2 -= 1;
13 | count--;
14 | }
15 |
16 | return (
17 |
18 | {val}
19 | {++count}
20 | {--count2}
21 | {typeof count}
22 |
23 | );
24 | }
25 |
26 | Component.compileRootComponent = true;
27 |
28 | module.exports = Component;
29 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic45.js:
--------------------------------------------------------------------------------
1 | // props:{cond: true}
2 | var React = require("react");
3 |
4 | function Component({ cond }: { cond: boolean }) {
5 | let val = "foo";
6 | let count = 0;
7 | let count2 = 5;
8 |
9 | if (cond) {
10 | val += " test";
11 | }
12 |
13 | return (
14 |
15 | {val}
16 | {++count}
17 | {--count2}
18 | {typeof count}
19 |
20 | );
21 | }
22 |
23 | Component.compileRootComponent = true;
24 |
25 | module.exports = Component;
26 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic46.js:
--------------------------------------------------------------------------------
1 | // props:{x: 10}
2 | var React = require("react");
3 |
4 | function Component2({ children }: { children: React.Node }) {
5 | return {children};
6 | }
7 |
8 | function Component({ x }: { x: number }) {
9 | return (
10 |
11 |
12 |
14 |
15 |
17 |
18 |
20 |
21 | );
22 | }
23 |
24 | Component.compileRootComponent = true;
25 |
26 | module.exports = Component;
27 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic47.js:
--------------------------------------------------------------------------------
1 | // props:{cond: true, x: 123}
2 | var React = require("react");
3 |
4 | function Component({x, cond}: {x: string, cond: boolean}) {
5 | var otherVal;
6 |
7 | if (cond) {
8 | otherVal = 456;
9 | }
10 |
11 | return {x}
13 | {x}
16 | {x}
19 | {otherVal || x}123
12 | }
13 |
14 | Component.compileRootComponent = true;
15 |
16 | module.exports = Component;
--------------------------------------------------------------------------------
/tests/jsx/basic/basic47b.js:
--------------------------------------------------------------------------------
1 | // props:{cond: true, x: 123}
2 | var React = require("react");
3 |
4 | function Component({x, cond}: {x: string, cond: boolean}) {
5 | var otherVal;
6 |
7 | if (cond) {
8 | otherVal = 456;
9 | }
10 |
11 | return {otherVal && x}123
12 | }
13 |
14 | Component.compileRootComponent = true;
15 |
16 | module.exports = Component;
--------------------------------------------------------------------------------
/tests/jsx/basic/basic48.js:
--------------------------------------------------------------------------------
1 | // props:{val: "hello world"}
2 | var React = require("react");
3 |
4 | function Component2({ children }: { children: Array
19 |
20 | {getChildren(val)}
21 | {getChildren2()}
22 |
23 |
24 | );
25 | }
26 |
27 | Component.compileRootComponent = true;
28 |
29 | module.exports = Component;
30 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic49.js:
--------------------------------------------------------------------------------
1 | // props:{val: "hello world"}
2 | var React = require("react");
3 |
4 | function Component2({ children }: { children: Array
19 |
20 | {getChildren(val)}
21 | {getChildren2("Hello world")}
22 |
23 |
24 | );
25 | }
26 |
27 | Component.compileRootComponent = true;
28 |
29 | module.exports = Component;
30 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic5.js:
--------------------------------------------------------------------------------
1 | // props:{cond: false, cond2: false, txt: '', number: 123}
2 |
3 | var React = require("react");
4 |
5 | function Component({
6 | cond,
7 | cond2,
8 | txt,
9 | num
10 | }: {
11 | cond: boolean,
12 | cond2: boolean,
13 | txt: string,
14 | num: number
15 | }) {
16 | var numStr = num + "";
17 | var txt2 = "100".toString();
18 | var txt3 = "Hello" + "world";
19 | return (
20 |
21 | {!cond && cond2 === false ? txt : numStr}
22 |
23 | {txt2}
24 | {txt3}
25 | {txt}
26 |
27 |
28 | );
29 | }
30 |
31 | Component.compileRootComponent = true;
32 |
33 | module.exports = Component;
34 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic50.js:
--------------------------------------------------------------------------------
1 | // props:{cond: true, cond2: true, x: 123}
2 | var React = require("react");
3 |
4 | function Component({ x, cond, cond2 }: { x: string, cond: boolean, cond2: boolean }) {
5 | var otherVal;
6 |
7 | if (cond) {
8 | otherVal = {x};
9 | }
10 |
11 | if (cond2) {
12 | otherVal = [{x}
];
13 | }
14 |
15 | return (
16 |
17 | {otherVal}
18 | {x}
19 |
20 | );
21 | }
22 |
23 | Component.compileRootComponent = true;
24 |
25 | module.exports = Component;
26 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic51.js:
--------------------------------------------------------------------------------
1 | // props:{cond: true, cond2: true, x: 123, padding: 10}
2 | var React = require("react");
3 |
4 | function getValue(x): string {
5 | return x;
6 | }
7 |
8 | function Component({ x, cond, cond2, padding }: { x: string, cond: boolean, cond2: boolean, padding: number }) {
9 | var otherVal;
10 |
11 | if (cond) {
12 | otherVal = {cond2 ? getValue(x) : getValue("456")};
13 | }
14 |
15 | if (cond2) {
16 | otherVal = [cond ? {x}
: {x}];
17 | }
18 |
19 | var span = Span!;
20 | var span2 = Span 2!;
21 |
22 | return (
23 |
24 | {otherVal}
25 | {x}
26 | {span && span2}
27 |
28 | );
29 | }
30 |
31 | Component.compileRootComponent = true;
32 |
33 | module.exports = Component;
34 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic52.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function Component2({ obj }: { obj: { val: string, el: React.Node, func: () => string, func2: () => React.Node } }) {
4 | return (
5 |
6 | {obj.val}
7 | {obj.el}
8 | {obj.func()}
9 | {obj.func2()}
10 |
11 | );
12 | }
13 |
14 | function Component() {
15 | const obj = {
16 | val: "Hello world",
17 | el: 123,
18 | func: (): string => "foo bar!",
19 | func2: (): React.Node => 456,
20 | };
21 |
22 | return (
23 |
24 |
26 | );
27 | }
28 |
29 | Component.compileRootComponent = true;
30 |
31 | module.exports = Component;
32 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic53.js:
--------------------------------------------------------------------------------
1 | // props:{a: "this is a", b: "this is b", c: "this is c", className: "this is className", id: "this is id"}
2 | var React = require("react");
3 |
4 | function Component({ a, b, c, ...others }: { a: string, b: string, c: string, className: string, id: string }) {
5 | return (
6 |
7 | {a}
8 | {b}
9 | {c}
10 |
11 | );
12 | }
13 |
14 | Component.compileRootComponent = true;
15 |
16 | module.exports = Component;
17 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic54.js:
--------------------------------------------------------------------------------
1 | // props:{a: "this is a", b: "this is b", c: "this is c", id: "this is id", className: "this is className"}
2 | var React = require("react");
3 |
4 | function Component({ a, b, c, ...others }: { a: string, b: string, c: string, className: string, id: string }) {
5 | return (
6 |
7 | {a}
8 | {b}
9 | {c}
10 | {others.id.toString()}
11 | {others.className.toString()}
12 |
13 | );
14 | }
15 |
16 | Component.compileRootComponent = true;
17 |
18 | module.exports = Component;
19 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic55.js:
--------------------------------------------------------------------------------
1 | // props:{id: "this is id", className: "this is className"}
2 | var React = require("react");
3 |
4 | function Component({ a, b, c, ...others }: { a?: string, b?: string, c?: string, className: string, id: string }) {
5 | return (
6 |
7 | {a}
8 | {b}
9 | {c}
10 | {others.id.toString()}
11 | {others.className.toString()}
12 |
13 | );
14 | }
15 |
16 | Component.compileRootComponent = true;
17 |
18 | module.exports = Component;
19 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic56.js:
--------------------------------------------------------------------------------
1 | // props:{a: "this is a", b: "this is b", c: "this is c", id: "this is id", className: "this is className"}
2 | var React = require("react");
3 |
4 | function Component2({ others }: { others: { className: string, id: string } }) {
5 | return (
6 |
7 | {" "}
8 | {others.id.toString()}
9 | {others.className.toString()}
10 |
11 | );
12 | }
13 |
14 | function Component({ a, b, c, ...others }: { a: string, b: string, c: string, className: string, id: string }) {
15 | return (
16 |
17 | {a}
18 | {b}
19 | {c}
20 |
22 | );
23 | }
24 |
25 | Component.compileRootComponent = true;
26 |
27 | module.exports = Component;
28 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic57.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function Component() {
4 | const props = {
5 | className: "big-div",
6 | id: "big",
7 | };
8 | return Hello world
9 | }
10 |
11 | Component.compileRootComponent = true;
12 |
13 | module.exports = Component;
--------------------------------------------------------------------------------
/tests/jsx/basic/basic58.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function Component() {
4 | const props = {
5 | className: "big-div",
6 | id: "big",
7 | };
8 | return Hello world
9 | }
10 |
11 | Component.compileRootComponent = true;
12 |
13 | module.exports = Component;
--------------------------------------------------------------------------------
/tests/jsx/basic/basic59.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function Component2({ children, className, id, foo }: { children: string, className: string, id: string, foo: string }) {
4 | return (
5 |
6 | {children}{foo}
7 |
8 | );
9 | }
10 |
11 | function Component() {
12 | const props = {
13 | className: "big-div",
14 | id: "big",
15 | foo: "bar",
16 | };
17 | return (
18 | -
22 | {children}
23 |
6 | {children}{foo}
7 |
8 | );
9 | }
10 |
11 | function Component() {
12 | const props = {
13 | className: "big-div",
14 | id: "big",
15 | foo: "bar",
16 | };
17 | return (
18 |
15 | {a}
16 | {b}
17 | {c}
18 |
20 | );
21 | }
22 |
23 | Component.compileRootComponent = true;
24 |
25 | module.exports = Component;
26 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic62.js:
--------------------------------------------------------------------------------
1 | // props:{a: "this is a", b: "this is b", c: "this is c", className: "this is className", id: "this is id"}
2 | var React = require("react");
3 |
4 | function Component2({ className, id }: { className: string, id: string }) {
5 | return (
6 |
7 | Hello world
8 |
9 | );
10 | }
11 |
12 | function Component({ a, b, c, ...others }: { a: string, b: string, c: string, className: string, id: string }) {
13 | return (
14 |
15 | {a}
16 | {b}
17 | {c}
18 |
20 | );
21 | }
22 |
23 | Component.compileRootComponent = true;
24 |
25 | module.exports = Component;
26 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic63.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function Component2({ children }: { children: (text: string) => React.Node }) {
4 | return {children("Hello world")}
;
5 | }
6 |
7 | function Component() {
8 | return (
9 |
10 |
11 | {function(text: string): React.Node {
12 | return {text};
13 | }}
14 |
15 |
16 | );
17 | }
18 |
19 | Component.compileRootComponent = true;
20 |
21 | module.exports = Component;
22 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic64.js:
--------------------------------------------------------------------------------
1 | // props:{cond: false, text: "hello world"}
2 | var React = require("react");
3 |
4 | function Component2({ children }: { children: (text: string) => React.Node }) {
5 | return {children("Hello world")}
;
6 | }
7 |
8 | function Component({ cond, text }: { cond: boolean, text: string }) {
9 | var icon;
10 |
11 | if (!cond) {
12 | icon = null;
13 | } else {
14 | icon = {text}
;
15 | }
16 |
17 | return (
18 |
19 |
20 | {function(childText: string): React.Node {
21 | return (
22 |
23 | {icon}
24 | {childText}
25 |
26 | );
27 | }}
28 |
29 |
30 | );
31 | }
32 |
33 | Component.compileRootComponent = true;
34 |
35 | module.exports = Component;
36 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic64b.js:
--------------------------------------------------------------------------------
1 | // props:{cond: true, text: "hello world ##"}
2 | var React = require("react");
3 |
4 | function Component2({ children }: { children: (text: string) => React.Node }) {
5 | return {children("Hello world")}
;
6 | }
7 |
8 | function Component({ cond, text }: { cond: boolean, text: string }) {
9 | var icon;
10 |
11 | if (!cond) {
12 | icon = null;
13 | } else {
14 | icon = {text}
;
15 | }
16 |
17 | return (
18 |
19 |
20 | {function(childText: string): React.Node {
21 | return (
22 |
23 | {icon}
24 | {childText}
25 |
26 | );
27 | }}
28 |
29 |
30 | );
31 | }
32 |
33 | Component.compileRootComponent = true;
34 |
35 | module.exports = Component;
36 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic65.js:
--------------------------------------------------------------------------------
1 | // props:{cond: false, text: "hello world 2"}
2 | var React = require("react");
3 |
4 | function Component3({ children }: { children: React.Node }) {
5 | return {children};
6 | }
7 |
8 | function Component2({ children }: { children: (text: string) => React.Node }) {
9 | return {children("Hello world")}
;
10 | }
11 |
12 | function Component({ cond, text }: { cond: boolean, text: string }) {
13 | var icon;
14 |
15 | if (!cond) {
16 | icon = null;
17 | } else {
18 | icon = {text}
;
19 | }
20 |
21 | return (
22 |
23 |
24 | {function(childText: string): React.Node {
25 | return (
26 |
27 | {icon}
28 | {childText}
29 |
30 | );
31 | }}
32 |
33 |
34 | );
35 | }
36 |
37 | Component.compileRootComponent = true;
38 |
39 | module.exports = Component;
40 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic65b.js:
--------------------------------------------------------------------------------
1 | // props:{cond: true, text: "hello world 2"}
2 | var React = require("react");
3 |
4 | function Component3({ children }: { children: React.Node }) {
5 | return {children};
6 | }
7 |
8 | function Component2({ children }: { children: (text: string) => React.Node }) {
9 | return {children("Hello world")}
;
10 | }
11 |
12 | function Component({ cond, text }: { cond: boolean, text: string }) {
13 | var icon;
14 |
15 | if (!cond) {
16 | icon = null;
17 | } else {
18 | icon = {text}
;
19 | }
20 |
21 | return (
22 |
23 |
24 | {function(childText: string): React.Node {
25 | return (
26 |
27 | {icon}
28 | {childText}
29 |
30 | );
31 | }}
32 |
33 |
34 | );
35 | }
36 |
37 | Component.compileRootComponent = true;
38 |
39 | module.exports = Component;
40 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic66.js:
--------------------------------------------------------------------------------
1 | // props:{cond: false, text: "hello world 2"}
2 | var React = require("react");
3 |
4 | function Component4({ children }: { children: string }) {
5 | return {children};
6 | }
7 |
8 | function Component3({ children }: { children: React.Node }) {
9 | return {children};
10 | }
11 |
12 | function Component2({ children }: { children: (text: string) => React.Node }) {
13 | return {children("Hello world")}
;
14 | }
15 |
16 | function Component({ cond, text }: { cond: boolean, text: string }) {
17 | var icon;
18 |
19 | if (!cond) {
20 | icon = null;
21 | } else {
22 | icon =
27 |
28 | {function(childText: string): React.Node {
29 | return (
30 |
31 | {icon}
32 | {childText}
33 |
34 | );
35 | }}
36 |
37 |
38 | );
39 | }
40 |
41 | Component.compileRootComponent = true;
42 |
43 | module.exports = Component;
44 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic67.js:
--------------------------------------------------------------------------------
1 | // props:{cond: false, text: "hello world 2"}
2 | var React = require("react");
3 |
4 | function Component4({ children }: { children: string }) {
5 | return {children};
6 | }
7 |
8 | function Component3({ children }: { children: React.Node }) {
9 | return {children};
10 | }
11 |
12 | function Component2({ children }: { children: (text: string) => React.Node }) {
13 | return {children("Hello world")}
;
14 | }
15 |
16 | function Component({ cond, text }: { cond: boolean, text: string }) {
17 | var icon;
18 |
19 | if (!cond) {
20 | icon = null;
21 | } else {
22 | icon =
27 |
28 | {function(childText: string): React.Node {
29 | return (
30 |
31 | {icon}
32 | {childText}
33 |
34 | );
35 | }}
36 |
37 |
38 | ) : null;
39 | }
40 |
41 | Component.compileRootComponent = true;
42 |
43 | module.exports = Component;
44 |
--------------------------------------------------------------------------------
/tests/jsx/basic/basic68.js:
--------------------------------------------------------------------------------
1 | // props:{cond: true}
2 | var React = require("react");
3 |
4 | function Component({ cond }: { cond: boolean }) {
5 | const Tag = cond ? "a" : "span";
6 |
7 | return -
26 | {children}
27 |
-
40 | {children}
41 |
-
57 | {children}
58 |
Hello world
9 | Hello world
9 | Hello world
10 | <>
11 | Static text
12 |
13 | Hello world
10 | <>
11 | Static text
12 |
13 | Hello world
10 | <>
11 | Static text
12 |
13 | Hello world
13 | <>
14 | Static text
15 |
16 | Hello world
21 | <>Static text
22 | Hello world
23 | <>Static text
24 | Hello world
11 | <>
12 | Static text
13 |
14 | {value}
;
6 | }
7 |
8 | Component.compileRootComponent = true;
9 |
10 | module.exports = Component;
11 |
--------------------------------------------------------------------------------
/tests/jsx/hooks/hooks2.js:
--------------------------------------------------------------------------------
1 | // Due to a Closure Compiler Bug, this code can't compile in ADVANCED
2 | // https://github.com/google/closure-compiler/issues/3145
3 | // gcc_SIMPLE
4 |
5 | var React = require("react");
6 | var { useState } = React;
7 |
8 | function Component() {
9 | const [value, updateValue] = useState("Hello world 2");
10 | return (
11 |
12 | {value}
13 | {value + " - again"}
14 |
15 | );
16 | }
17 |
18 | Component.compileRootComponent = true;
19 |
20 | module.exports = Component;
21 |
--------------------------------------------------------------------------------
/tests/jsx/hooks/hooks3.js:
--------------------------------------------------------------------------------
1 | // Due to a Closure Compiler Bug, this code can't compile in ADVANCED
2 | // https://github.com/google/closure-compiler/issues/3145
3 | // gcc_SIMPLE
4 | // props:{cond: true}
5 |
6 | var React = require("react");
7 | var { useState } = React;
8 |
9 | function Component({ cond }: { cond: boolean }) {
10 | const [value, updateValue] = useState("Hello world 2");
11 |
12 | if (cond) {
13 | return null;
14 | }
15 | return (
16 |
17 | {value}
18 | {value + " - again"}
19 |
20 | );
21 | }
22 |
23 | Component.compileRootComponent = true;
24 |
25 | module.exports = Component;
26 |
--------------------------------------------------------------------------------
/tests/jsx/hooks/hooks4.js:
--------------------------------------------------------------------------------
1 | // Due to a Closure Compiler Bug, this code can't compile in ADVANCED
2 | // https://github.com/google/closure-compiler/issues/3145
3 | // gcc_SIMPLE
4 | // props:{cond: false, cond2: false}
5 |
6 | var React = require("react");
7 | var { useState } = React;
8 |
9 | function Component({ cond, cond2 }: { cond: boolean, cond2: boolean }) {
10 | const [value, updateValue] = useState("Hello world 2");
11 |
12 | if (cond) {
13 | return {value};
14 | }
15 | if (cond2) {
16 | return {value}
;
17 | }
18 | return (
19 |
20 | {value}
21 | {value + " - again"}
22 |
23 | );
24 | }
25 |
26 | Component.compileRootComponent = true;
27 |
28 | module.exports = Component;
29 |
--------------------------------------------------------------------------------
/tests/jsx/hooks/hooks5.js:
--------------------------------------------------------------------------------
1 | // Due to a Closure Compiler Bug, this code can't compile in ADVANCED
2 | // https://github.com/google/closure-compiler/issues/3145
3 | // gcc_SIMPLE
4 | // props:{cond: false}
5 |
6 | var React = require("react");
7 | var { useState } = React;
8 |
9 | function Component({ cond }: { cond: boolean }) {
10 | const [value, updateValue] = useState("Hello world 2");
11 |
12 | if (cond) {
13 | return null;
14 | }
15 | return (
16 |
17 | {value}
18 | {value + " - again"}
19 |
20 | );
21 | }
22 |
23 | Component.compileRootComponent = true;
24 |
25 | module.exports = Component;
26 |
--------------------------------------------------------------------------------
/tests/jsx/large/large.js:
--------------------------------------------------------------------------------
1 | // props:{val1: "val1", val2: "val2", val3: "val3", val4: "val4", val5: "val5", val6: "val6", val7: "val7"}
2 | var React = require("react");
3 |
4 | function Component({
5 | val1,
6 | val2,
7 | val3,
8 | val4,
9 | val5,
10 | val6,
11 | val7
12 | }: {
13 | val1: string,
14 | val2: string,
15 | val3: string,
16 | val4: string,
17 | val5: string,
18 | val6: string,
19 | val7: string,
20 | }) {
21 | return (
22 |
23 |
24 |
26 |
27 |
54 |
55 | );
56 | }
57 |
58 | Component.compileRootComponent = true;
59 |
60 | module.exports = Component;
61 |
--------------------------------------------------------------------------------
/tests/jsx/style/style.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function Component() {
4 | return (
5 | {val1}
25 |
28 |
40 | Sub-section #1
29 |
30 |
39 | {val2}
31 | {val4} 32 | 35 | 38 |
41 |
53 | Sub-section #2
42 |
43 |
52 | {val5}
44 | {val7} 45 | 48 | 51 |
6 |
8 | );
9 | }
10 |
11 | Component.compileRootComponent = true;
12 |
13 | module.exports = Component;
14 |
--------------------------------------------------------------------------------
/tests/jsx/style/style2.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function Component() {
4 | return (
5 | Hello world
7 |
6 |
8 | );
9 | }
10 |
11 | Component.compileRootComponent = true;
12 |
13 | module.exports = Component;
14 |
--------------------------------------------------------------------------------
/tests/jsx/style/style3.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function Component() {
4 | return (
5 | Hello world
7 |
6 |
17 | );
18 | }
19 |
20 | Component.compileRootComponent = true;
21 |
22 | module.exports = Component;
23 |
--------------------------------------------------------------------------------
/tests/jsx/style/style4.js:
--------------------------------------------------------------------------------
1 | // props:{styles: {color: "red", backgroundColor: "black", margin: 10}}
2 |
3 | var React = require("react");
4 |
5 | function Component({ styles }: { styles: { color: string, backgroundColor: string, margin: number } }) {
6 | return (
7 |
14 | Hello world
15 |
16 |
8 |
10 | );
11 | }
12 |
13 | Component.compileRootComponent = true;
14 |
15 | module.exports = Component;
16 |
--------------------------------------------------------------------------------
/tests/modules/simple-app/Header.compiled.js:
--------------------------------------------------------------------------------
1 | const Header = [98305, [102402, "div", "Header"]];
2 | module.exports = Header;
--------------------------------------------------------------------------------
/tests/modules/simple-app/Header.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | function Header() {
4 | return Hello world
9 | Header
;
5 | }
6 |
7 | module.exports = Header;
8 |
--------------------------------------------------------------------------------
/tests/modules/simple-app/index.compiled.js:
--------------------------------------------------------------------------------
1 | var Header = require("./Header.compiled.js");
2 |
3 | const App = [98304, [100354, "div", [[102402, "div", "Header"], [32771, "App"]]]];
4 | module["exports"] = App;
--------------------------------------------------------------------------------
/tests/modules/simple-app/index.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 | var Header = require("./Header");
3 |
4 | function App() {
5 | return (
6 |
7 |
10 | );
11 | }
12 |
13 | App.compileRootComponent = true;
14 |
15 | module.exports = App;
16 |
--------------------------------------------------------------------------------
/tests/modules/simple-app2/Footer.compiled.js:
--------------------------------------------------------------------------------
1 | import type { FooterProps } from "./type";
2 |
3 | function Footer_ComputeFunction(x) {
4 | return [x];
5 | }
6 |
7 | const Footer = [1, Footer_ComputeFunction, [8194, "div", 0]];
8 | module.exports = Footer;
--------------------------------------------------------------------------------
/tests/modules/simple-app2/Footer.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 |
3 | import type { FooterProps } from "./type";
4 |
5 | function Footer({ x }: FooterProps) {
6 | return {x}
;
7 | }
8 |
9 | module.exports = Footer;
10 |
--------------------------------------------------------------------------------
/tests/modules/simple-app2/Header.compiled.js:
--------------------------------------------------------------------------------
1 | const {
2 | formatString
3 | } = require("./utils");
4 |
5 | import type { HeaderProps } from "./type";
6 |
7 | function Header_ComputeFunction(x) {
8 | return [x];
9 | }
10 |
11 | const Header = [1, Header_ComputeFunction, [8194, "div", 0]];
12 | module.exports = {
13 | formatString,
14 | Header
15 | };
--------------------------------------------------------------------------------
/tests/modules/simple-app2/Header.js:
--------------------------------------------------------------------------------
1 | const React = require("react");
2 | const { formatString } = require("./utils");
3 |
4 | import type { HeaderProps } from "./type";
5 |
6 | function Header({ x }: HeaderProps) {
7 | return {x}
;
8 | }
9 |
10 | module.exports = {
11 | formatString,
12 | Header,
13 | };
14 |
--------------------------------------------------------------------------------
/tests/modules/simple-app2/index.compiled.js:
--------------------------------------------------------------------------------
1 | // props:{x: "Hello world!"}
2 | var {
3 | ["Header"]: Header,
4 | ["formatString"]: formatString
5 | } = require("./Header.compiled.js");
6 |
7 | var Footer = require("./Footer.compiled.js");
8 |
9 | import type { IndexProps } from "./type";
10 |
11 | function App_ComputeFunction(x) {
12 | var __cached__0;
13 |
14 | __cached__0 = formatString(x);
15 | return [[x], __cached__0, [x]];
16 | }
17 |
18 | const App = [0, ["x"], App_ComputeFunction, [2050, "div", [[12, Header, 0], [3, 1], [12, Footer, 2]]]];
19 | module["exports"] = App;
--------------------------------------------------------------------------------
/tests/modules/simple-app2/index.js:
--------------------------------------------------------------------------------
1 | // props:{x: "Hello world!"}
2 | var React = require("react");
3 | var { Header, formatString } = require("./Header");
4 | var Footer = require("./Footer");
5 |
6 | import type { IndexProps } from "./type";
7 |
8 | function App({ x }: IndexProps) {
9 | return (
10 |
11 |
15 | );
16 | }
17 |
18 | App.compileRootComponent = true;
19 |
20 | module.exports = App;
21 |
--------------------------------------------------------------------------------
/tests/modules/simple-app2/type.js:
--------------------------------------------------------------------------------
1 | export type IndexProps = {
2 | x: string,
3 | };
4 |
5 | export type HeaderProps = {
6 | x: string,
7 | };
8 |
9 | export type FooterProps = {
10 | x: string,
11 | };
12 |
--------------------------------------------------------------------------------
/tests/modules/simple-app2/utils.js:
--------------------------------------------------------------------------------
1 | function formatString(x): string {
2 | return x.toString() + " 123";
3 | }
4 |
5 | module.exports = {
6 | formatString,
7 | };
8 |
--------------------------------------------------------------------------------
/tests/modules/simple-app3/Foo.compiled.js:
--------------------------------------------------------------------------------
1 | function Foo_ComputeFunction(text) {
2 | return [text];
3 | }
4 |
5 | export default [1, Foo_ComputeFunction, [2050, "span", [[32771, "Hello world"], [8194, "em", 0]]]];
--------------------------------------------------------------------------------
/tests/modules/simple-app3/Foo.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default function Foo({ text }: { text: string }) {
4 | return (
5 |
6 | Hello world{text}
7 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/tests/modules/simple-app3/index.compiled.js:
--------------------------------------------------------------------------------
1 | import Foo from "./Foo.compiled.js";
2 | import { renderText, renderDiv, renderDivWithText, renderSpan } from "./utils.compiled.js";
3 |
4 | function App_ComputeFunction() {
5 | var __cached__1;
6 |
7 | var __cached__0;
8 |
9 | __cached__1 = renderDivWithText("foo bar!");
10 | __cached__0 = renderText();
11 | renderText();
12 | return [[renderText()], __cached__0, __cached__1];
13 | }
14 |
15 | const App = [0, 0, App_ComputeFunction, [2050, "div", [[12, Foo, 0], [3, 1], [102402, "div", "span!"], [8, [8194, "div", 0], 2], [102402, "span", "Span!"]]]];
16 | module["exports"] = App;
--------------------------------------------------------------------------------
/tests/modules/simple-app3/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Foo from "./Foo";
3 | import {renderText, renderDiv, renderDivWithText, renderSpan} from "./utils";
4 |
5 | function App() {
6 | return (
7 |
8 |
14 | );
15 | }
16 |
17 | App.compileRootComponent = true;
18 |
19 | module.exports = App;
20 |
--------------------------------------------------------------------------------
/tests/modules/simple-app3/utils.compiled.js:
--------------------------------------------------------------------------------
1 | export function renderText(): string {
2 | return "Text!";
3 | }
4 | export function renderDiv(): React.Node {
5 | return [];
6 | }
7 | export function renderDivWithText(text: string): React.Node {
8 | return [text];
9 | }
10 | export const renderSpan = (): React.Node => [];
--------------------------------------------------------------------------------
/tests/modules/simple-app3/utils.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export function renderText(): string {
4 | return "Text!";
5 | }
6 |
7 | export function renderDiv(): React.Node {
8 | return span!
;
9 | }
10 |
11 | export function renderDivWithText(text: string): React.Node {
12 | return {text}
;
13 | }
14 |
15 | export const renderSpan = (): React.Node => Span!;
--------------------------------------------------------------------------------
/tests/modules/simple-app4/Foo.compiled.js:
--------------------------------------------------------------------------------
1 | function Foo_ComputeFunction(text) {
2 | return [text];
3 | }
4 |
5 | export default [1, Foo_ComputeFunction, [2050, "span", [[32771, "Hello world"], [8194, "em", 0]]]];
--------------------------------------------------------------------------------
/tests/modules/simple-app4/Foo.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default function Foo({ text }: { text: string }) {
4 | return (
5 |
6 | Hello world{text}
7 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/tests/modules/simple-app4/index.compiled.js:
--------------------------------------------------------------------------------
1 | import Foo from "./Foo.compiled.js";
2 | import { renderText, renderDivOrNull, renderDivWithText, renderSpan } from "./utils.compiled.js";
3 |
4 | function App_ComputeFunction() {
5 | var __cached__2;
6 |
7 | var __cached__1;
8 |
9 | var __cached__0;
10 |
11 | __cached__2 = renderDivWithText("foo bar!");
12 | __cached__1 = renderDivOrNull(true);
13 | __cached__0 = renderText();
14 | renderText();
15 | return [[renderText()], __cached__0, __cached__1, __cached__2];
16 | }
17 |
18 | const App = [0, 0, App_ComputeFunction, [2050, "div", [[12, Foo, 0], [3, 1], [8, [4098, "div", "another span!"], 2], [8, [8194, "div", 0], 3], [102402, "span", "Span!"]]]];
19 | module["exports"] = App;
--------------------------------------------------------------------------------
/tests/modules/simple-app4/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Foo from "./Foo";
3 | import {renderText, renderDivOrNull, renderDivWithText, renderSpan} from "./utils";
4 |
5 | function App() {
6 | return (
7 |
8 |
14 | );
15 | }
16 |
17 | App.compileRootComponent = true;
18 |
19 | module.exports = App;
20 |
--------------------------------------------------------------------------------
/tests/modules/simple-app4/utils.compiled.js:
--------------------------------------------------------------------------------
1 | export function renderText(): string {
2 | return "Text!";
3 | }
4 | export function renderDivOrNull(cond: boolean): React.Node {
5 | if (cond) {
6 | return null;
7 | }
8 |
9 | return [];
10 | }
11 | export function renderDivWithText(text: string): React.Node {
12 | return [text];
13 | }
14 | export const renderSpan = (): React.Node => [];
--------------------------------------------------------------------------------
/tests/modules/simple-app4/utils.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export function renderText(): string {
4 | return "Text!";
5 | }
6 |
7 | export function renderDivOrNull(cond: boolean): React.Node {
8 | if (cond) {
9 | return null;
10 | }
11 | return another span!
;
12 | }
13 |
14 | export function renderDivWithText(text: string): React.Node {
15 | return {text}
;
16 | }
17 |
18 | export const renderSpan = (): React.Node => Span!;
--------------------------------------------------------------------------------