From 882435622714242e5b3a710d20aa23a097e4f894 Mon Sep 17 00:00:00 2001 From: Elad Ben-Israel Date: Wed, 10 Oct 2018 09:59:32 +0300 Subject: [PATCH] fix(cdk): jsx support conflicts with React usage (#884) Fixes #830 BREAKING CHANGE The CDK is no longer shipped with built-in support for JSX. You can still use JSX but you will have to manually configure it. --- packages/@aws-cdk/cdk/lib/core/jsx.ts | 81 -------------------- packages/@aws-cdk/cdk/lib/index.ts | 1 - packages/@aws-cdk/cdk/test/core/test.jsx.tsx | 76 ------------------ packages/aws-cdk/package-lock.json | 37 +++++---- 4 files changed, 22 insertions(+), 173 deletions(-) delete mode 100644 packages/@aws-cdk/cdk/lib/core/jsx.ts delete mode 100644 packages/@aws-cdk/cdk/test/core/test.jsx.tsx diff --git a/packages/@aws-cdk/cdk/lib/core/jsx.ts b/packages/@aws-cdk/cdk/lib/core/jsx.ts deleted file mode 100644 index 81c116ee30e14..0000000000000 --- a/packages/@aws-cdk/cdk/lib/core/jsx.ts +++ /dev/null @@ -1,81 +0,0 @@ -import { Construct } from './construct'; - -export type ConstructConstructor = { new (...args: any[]): Construct }; - -export namespace jsx { - - /** - * The JSX factory function. This is what TypeScript converts a JSX statement to. - * - * For example: - * - * will produce this code: - * jsx.create(Foo, { p1: 'a', p2: 2 }, []); - * - * This function will not actually create any objects, but rather just return a tree of - * element information for later consumption by jsx.construct(tree), which can be used - * to materialize an actual construct tree from. - * - * @param type The class - * @param props Property hash - * @param children Array of children - * @returns element tree - */ - export function create(type: ConstructConstructor, props: any, ...children: JSX.Element[]): JSX.Element { - if (!(type.prototype instanceof Construct)) { - throw new Error('All nodes must derive from Construct: ' + type); - } - - return { - type, props: props || {}, children - }; - } - - /** - * Converts a JSX tree to a construct tree. - * Creates all construct objects and associate them together as children. - * @param tree The JSX tree - * @param parent Optional parent for the construct tree - * @returns A Construct object - */ - export function construct(tree: JSX.Element, parent?: Construct): Construct { - const id = (tree.props && tree.props.id) || ''; - const root = new tree.type(parent, id, tree.props); // create root - createChildren(root, tree.children); - return root; - } - - function createChildren(parent: Construct, children: any[]) { - for (const child of children) { - const id = (child.props && child.props.id) || ''; - const childObj = new child.type(parent, id, child.props); - createChildren(childObj, child.children); - } - } -} - -declare global { - namespace JSX { - /** - * Declare JSX.Element to be the lazy specification of a Construct - */ - export interface Element { - type: ConstructConstructor; - - props: any; - - children: JSX.Element[]; - } - - interface ElementAttributesProperty { - // Property of the object that TSC will use to see the allowable - // parameters for every type. - jsxProps: any; - } - - interface IntrinsicAttributes { - // Properties used by the framework, not by the individual classes. - id: string; - } - } -} diff --git a/packages/@aws-cdk/cdk/lib/index.ts b/packages/@aws-cdk/cdk/lib/index.ts index 549980a45e7fd..563534749ccea 100644 --- a/packages/@aws-cdk/cdk/lib/index.ts +++ b/packages/@aws-cdk/cdk/lib/index.ts @@ -1,7 +1,6 @@ export * from './core/construct'; export * from './core/tokens'; export * from './core/tag-manager'; -export * from './core/jsx'; export * from './cloudformation/cloudformation-json'; export * from './cloudformation/cloudformation-token'; diff --git a/packages/@aws-cdk/cdk/test/core/test.jsx.tsx b/packages/@aws-cdk/cdk/test/core/test.jsx.tsx deleted file mode 100644 index b73798c17c071..0000000000000 --- a/packages/@aws-cdk/cdk/test/core/test.jsx.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { Test } from 'nodeunit'; -import { Construct, jsx, Root } from '../../lib'; - -export = { - 'jsx can be used to create "trees" of constructs'(test: Test) { - const tree = - - - - - - ; - - const root = jsx.construct(tree); - // tslint:disable-next-line:max-line-length - test.equal(root.toTreeString(), 'MyRoot\n MyConstruct [child1]\n MyConstruct [child11]\n MyConstruct [child12]\n MyConstruct [child2]\n'); - test.equal((root.findChild('child1').findChild('child12') as MyConstruct).calculate(), 'prop1=boo, id=child12'); - test.equal((root.findChild('child2') as MyConstruct).calculate(), 'prop1=xxx, prop2=111, id=child2'); - - test.done(); - }, - - 'jsx.construct(tree) will actually create the object'(test: Test) { - const my = jsx.construct() as MyConstruct; - test.equal(my.calculate(), 'prop1=hey, id=foo'); - test.done(); - }, - - 'jsx.construct(tree, parent) can be used to add a JSX tree into an existing construct tree'(test: Test) { - const root = new Root(); - - jsx.construct(, root); - - test.equal(root.findChild('child').id, 'child'); - test.done(); - } -}; - -class MyRoot extends Root { - protected jsxProps: any; -} - -interface MyConstructProps { - prop1: string; - prop2?: number; -} - -class MyConstruct extends Construct { - public foo: number; - - /** - * This syntax tells TypeScript which properties are required for this construct. - * Only classes with the "jsx" property can be used in JSX syntax. - */ - protected jsxProps?: MyConstructProps; - - private str: string; - - /** - * Constructor will always receive `props` as the 3rd argument with properties passed via JSX. - */ - constructor(parent: Construct, id: string, props: MyConstructProps) { - super(parent, id); - - this.str = 'prop1=' + props.prop1; - if (props.prop2) { - this.str += ', prop2=' + props.prop2.toString(); - } - this.str += ', id=' + this.id; - this.foo = 123; - } - - public calculate() { - return this.str; - } -} diff --git a/packages/aws-cdk/package-lock.json b/packages/aws-cdk/package-lock.json index 8064ee4ea6698..18cb705520012 100644 --- a/packages/aws-cdk/package-lock.json +++ b/packages/aws-cdk/package-lock.json @@ -54,6 +54,12 @@ "@types/node": "*" } }, + "@types/js-yaml": { + "version": "3.11.2", + "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-3.11.2.tgz", + "integrity": "sha512-JRDtMPEqXrzfuYAdqbxLot1GvAr/QvicIZAnOAigZaj8xVMhuSJTg/xsv9E1TvyL+wujYhRLx9ZsQ0oFOSmwyA==", + "dev": true + }, "@types/minimatch": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz", @@ -99,12 +105,6 @@ "@types/node": "*" } }, - "@types/yamljs": { - "version": "0.2.30", - "resolved": "https://registry.npmjs.org/@types/yamljs/-/yamljs-0.2.30.tgz", - "integrity": "sha1-0DTh0ynkbo0Pc3yajbl/aPgbU4I=", - "dev": true - }, "@types/yargs": { "version": "8.0.3", "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-8.0.3.tgz", @@ -921,6 +921,22 @@ "resolved": "https://registry.npmjs.org/jmespath/-/jmespath-0.15.0.tgz", "integrity": "sha1-o/Iiqarp+Wb10nx5ZRDigJF2Qhc=" }, + "js-yaml": { + "version": "3.12.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.0.tgz", + "integrity": "sha512-PIt2cnwmPfL4hKNwqeiuz4bKfnzHTBv6HyVgjahA6mPLwPDzjDWrplJBMjHUFxku/N3FlmrbyPclad+I+4mJ3A==", + "requires": { + "argparse": "^1.0.7", + "esprima": "^4.0.0" + }, + "dependencies": { + "esprima": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==" + } + } + }, "jsbn": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz", @@ -1793,15 +1809,6 @@ "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=" }, - "yamljs": { - "version": "0.2.10", - "resolved": "https://registry.npmjs.org/yamljs/-/yamljs-0.2.10.tgz", - "integrity": "sha1-SBzHwlynOvWfWR8MluPOVsdXpA8=", - "requires": { - "argparse": "^1.0.7", - "glob": "^7.0.5" - } - }, "yargs": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/yargs/-/yargs-9.0.1.tgz",