From def15cc1130c399617bc896e690d715e52bda7dd Mon Sep 17 00:00:00 2001 From: Renuka Atale Date: Mon, 16 Sep 2019 15:54:49 -0700 Subject: [PATCH 1/6] Add: tutorial for typescript using Enact --- tutorial-typescript-enact/README.md | 256 ++++++ tutorial-typescript-enact/package-lock.json | 783 ++++++++++++++++++ tutorial-typescript-enact/package.json | 49 ++ .../resources/ilibmanifest.json | 3 + .../src/App/App.module.less | 8 + tutorial-typescript-enact/src/App/App.tsx | 33 + .../src/App/package.json | 3 + .../src/components/Counter/Counter.tsx | 91 ++ .../src/components/Counter/package.json | 3 + .../src/components/README.md | 1 + tutorial-typescript-enact/src/index.tsx | 12 + .../src/views/MainPanel.tsx | 17 + tutorial-typescript-enact/src/views/README.md | 9 + tutorial-typescript-enact/tsconfig.json | 26 + tutorial-typescript-enact/tslint.json | 5 + .../types/react-app-env.d.ts | 49 ++ 16 files changed, 1348 insertions(+) create mode 100644 tutorial-typescript-enact/README.md create mode 100644 tutorial-typescript-enact/package-lock.json create mode 100644 tutorial-typescript-enact/package.json create mode 100644 tutorial-typescript-enact/resources/ilibmanifest.json create mode 100644 tutorial-typescript-enact/src/App/App.module.less create mode 100644 tutorial-typescript-enact/src/App/App.tsx create mode 100644 tutorial-typescript-enact/src/App/package.json create mode 100644 tutorial-typescript-enact/src/components/Counter/Counter.tsx create mode 100644 tutorial-typescript-enact/src/components/Counter/package.json create mode 100644 tutorial-typescript-enact/src/components/README.md create mode 100644 tutorial-typescript-enact/src/index.tsx create mode 100644 tutorial-typescript-enact/src/views/MainPanel.tsx create mode 100644 tutorial-typescript-enact/src/views/README.md create mode 100644 tutorial-typescript-enact/tsconfig.json create mode 100644 tutorial-typescript-enact/tslint.json create mode 100644 tutorial-typescript-enact/types/react-app-env.d.ts diff --git a/tutorial-typescript-enact/README.md b/tutorial-typescript-enact/README.md new file mode 100644 index 00000000..f97af036 --- /dev/null +++ b/tutorial-typescript-enact/README.md @@ -0,0 +1,256 @@ +This project was bootstrapped with [@enact/cli](https://github.com/enactjs/cli). + +Below you will find some information on how to perform common tasks. +You can find the most recent version of this guide [here](https://github.com/enactjs/templates/blob/master/packages/typescript/template/README.md). +Additional documentation on @enact/cli can be found [here](https://github.com/enactjs/cli/blob/master/docs/index.md). + +## Folder Structure + +After creation, your project should look like this: + +``` +my-app/ + README.md + .gitignore + node_modules/ + package.json + tsconfig.json + tslint.json + src/ + App/ + App.tsx + App.less + package.json + components/ + views/ + MainPanel.tsx + index.tsx + resources/ + types/ + react-app-env.d.ts +``` + +For the project to build, **these files must exist with exact filenames**: + +* `package.json` is the core package manifest for the project +* `tsconfig.json` typescript configuration object +* `src/index.tsx` is the TypeScript entry point. + +You can delete or rename the other files. + +You can update the `license` entry in `package.json` to match the license of your choice. For more +information on licenses, please see the [npm documentation](https://docs.npmjs.com/files/package.json#license). + +## Available Scripts + +In the project directory, you can run: + +### `npm run serve` + +Builds and serves the app in the development mode.
+Open [http://localhost:8080](http://localhost:8080) to view it in the browser. + +The page will reload if you make edits.
+ +### `npm run pack` and `npm run pack-p` + +Builds the project in the working directory. Specifically, `pack` builds in development mode with code un-minified and with debug code included, whereas `pack-p` builds in production mode, with everything minified and optimized for performance. Be sure to avoid shipping or performance testing on development mode builds. + +### `npm run watch` + +Builds the project in development mode and keeps watch over the project directory. Whenever files are changed, added, or deleted, the project will automatically get rebuilt using an active shared cache to speed up the process. This is similar to the `serve` task, but without the http server. + +### `npm run clean` + +Deletes previous build fragments from ./dist. + +### `npm run lint` + +Runs syntax analysis on JavaScript files using the Enact configuration of Eslint and on TypeScript files using TSLint. NOTE: For TSLint, no rules are enabled. Update `tslint.json` to add rules. + +### `npm run test` and `npm run test-watch` + +These tasks will execute all valid tests (files that end in `-specs.(js|js|ts|tsx)`) that are within the project directory. The `test` is a standard single execution pass, while `test-watch` will set up a watcher to re-execute tests when files change. + +## Enact Build Options + +The @enact/cli tool will check the project's `package.json` looking for an optional `enact` object for a few customization options: + +* `template` _[string]_ - Filepath to an alternate HTML template to use with the [Webpack html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin). +* `isomorphic` _[string]_ - Alternate filepath to a custom isomorphic-compatible entrypoint. Not needed if main entrypoint is already isomorphic-compatible. +* `title` _[string]_ - Title text that should be put within the HTML's `` tags. +* `theme` _[object]_ - A simplified string name to extrapolate `fontGenerator`, `ri`, and `screenTypes` preset values from. For example, `"moonstone"` +* `fontGenerator` _[string]_ - Filepath to a commonjs fontGenerator module which will build locale-specific font CSS to inject into the HTML. By default will use any preset for a specified theme or fallback to moonstone. +* `ri` _[object]_ - Resolution independence options to be forwarded to the [LESS plugin](https://github.com/enyojs/less-plugin-resolution-independence). By default will use any preset for a specified theme or fallback to moonstone +* `screenTypes` _[array|string]_ - Array of 1 or more screentype definitions to be used with prerender HTML initialization. Can alternatively reference a json filepath to read for screentype definitons. By default will use any preset for a specified theme or fallback to moonstone. +* `nodeBuiltins` _[object]_ - Configuration settings for polyfilling NodeJS built-ins. See `node` [webpack option](https://webpack.js.org/configuration/node/). +* `deep` _[string|array]_ - 1 or more javascript conditions that, when met, indicate deeplinking and any prerender should be discarded. +* `target` _[string|array]_ - A build-type generic preset string (see `target` [webpack option](https://webpack.js.org/configuration/target/)) or alternatively a specific [browserlist array](https://github.com/ai/browserslist) of desired targets. +* `proxy` _[string]_ - Proxy target during project `serve` to be used within the [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware). + +For example: +```js +{ + ... + "enact": { + "theme": "moonstone", + "nodeBuiltins": { + fs: 'empty', + net: 'empty', + tls: 'empty' + } + } + ... +} +``` + +## Displaying Lint Output in the Editor + +Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint. + +They are not required for linting. You should see the linter output right in your terminal as well as the browser console. However, if you prefer the lint results to appear right in your editor, there are some extra steps you can do. + +You would need to install an ESLint plugin for your editor first. + +>**A note for Atom `linter-eslint` users** + +>If you are using the Atom `linter-eslint` plugin, make sure that **Use global ESLint installation** option is checked: + +> + +Then, you will need to install some packages *globally*: + +```sh +npm install -g eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-babel babel-eslint eslint-plugin-jest eslint-plugin-enact eslint-config-enact +``` + +## Installing a Dependency + +The generated project includes Enact (and all its libraries). It also includes React and ReactDOM. For test writing, both Sinon and Enzyme are as development dependencies. You may install other dependencies with `npm`: + +``` +npm install --save +``` + +## Importing a Component + +This project setup supports ES6 modules thanks to Babel. +While you can still use `require()` and `module.exports`, we encourage you to use [`import` and `export`](http://exploringjs.com/es6/ch_modules.html) instead. + +For example: + +### `Button.tsx` + +```js +import kind from '@enact/core/kind'; + +interface ButtonProps = { + color?: string +}; + +// kind() accepts a interface representing the props the component accepts +// You can include support for native DOM attributes as well with a union +const Button = kind({ + render() { + // ... + } +}); + +export default Button; // Don’t forget to use export default! +``` + +### `DangerButton.tsx` + + +```js +import kind from '@enact/core/kind'; +import Button from './Button'; // Import a component from another file + +const DangerButton = kind({ + render(props) { + return + + + + ) +}); + +const Counter = Countable({prop: 'count', increment: 'onIncrementClick', decrement: 'onDecrementClick', reset: 'onResetClick'}, CounterBase); + +export default Counter; +export { + Counter, + CounterBase, + Countable +}; diff --git a/tutorial-typescript-enact/src/components/Counter/package.json b/tutorial-typescript-enact/src/components/Counter/package.json new file mode 100644 index 00000000..c262edb7 --- /dev/null +++ b/tutorial-typescript-enact/src/components/Counter/package.json @@ -0,0 +1,3 @@ +{ + "main": "Counter.tsx" +} \ No newline at end of file diff --git a/tutorial-typescript-enact/src/components/README.md b/tutorial-typescript-enact/src/components/README.md new file mode 100644 index 00000000..b1a7853e --- /dev/null +++ b/tutorial-typescript-enact/src/components/README.md @@ -0,0 +1 @@ +Reusable components for your application go here \ No newline at end of file diff --git a/tutorial-typescript-enact/src/index.tsx b/tutorial-typescript-enact/src/index.tsx new file mode 100644 index 00000000..2c28735a --- /dev/null +++ b/tutorial-typescript-enact/src/index.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import {render} from 'react-dom'; +import App from './App'; + +const appElement = (); + +// In a browser environment, render instead of exporting +if (typeof window !== 'undefined') { + render(appElement, document.getElementById('root')); +} + +export default appElement; diff --git a/tutorial-typescript-enact/src/views/MainPanel.tsx b/tutorial-typescript-enact/src/views/MainPanel.tsx new file mode 100644 index 00000000..400f78e3 --- /dev/null +++ b/tutorial-typescript-enact/src/views/MainPanel.tsx @@ -0,0 +1,17 @@ +import Button from '@enact/moonstone/Button'; +import kind from '@enact/core/kind'; +import {Panel, Header} from '@enact/moonstone/Panels'; +import React from 'react'; + +const MainPanel = kind({ + name: 'MainPanel', + + render: (props) => ( + +
+ + + ) +}); + +export default MainPanel; diff --git a/tutorial-typescript-enact/src/views/README.md b/tutorial-typescript-enact/src/views/README.md new file mode 100644 index 00000000..22425290 --- /dev/null +++ b/tutorial-typescript-enact/src/views/README.md @@ -0,0 +1,9 @@ +## Hello, Enact + +The completed Hello, Enact app from the Enact tutorial. + +Run `npm install` then `npm run serve` to have the app running on [http://localhost:8080](http://localhost:8080), where you can view it in your browser. + +--- + +This project was bootstrapped with the Enact [cli](https://github.com/enactjs/cli). \ No newline at end of file diff --git a/tutorial-typescript-enact/tsconfig.json b/tutorial-typescript-enact/tsconfig.json new file mode 100644 index 00000000..9f54175b --- /dev/null +++ b/tutorial-typescript-enact/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "preserve" + }, + "include": [ + "src", + "types" + ] +} diff --git a/tutorial-typescript-enact/tslint.json b/tutorial-typescript-enact/tslint.json new file mode 100644 index 00000000..cdd04158 --- /dev/null +++ b/tutorial-typescript-enact/tslint.json @@ -0,0 +1,5 @@ +{ + "extends": ["tslint-react"], + "rules": { + } +} diff --git a/tutorial-typescript-enact/types/react-app-env.d.ts b/tutorial-typescript-enact/types/react-app-env.d.ts new file mode 100644 index 00000000..5fd81f94 --- /dev/null +++ b/tutorial-typescript-enact/types/react-app-env.d.ts @@ -0,0 +1,49 @@ +/// +/// +/// + +declare namespace NodeJS { + interface ProcessEnv { + NODE_ENV: 'development' | 'production' | 'test' + } +} + +declare module '*.bmp' { + const src: string; + export default src; +} + +declare module '*.gif' { + const src: string; + export default src; +} + +declare module '*.jpg' { + const src: string; + export default src; +} + +declare module '*.jpeg' { + const src: string; + export default src; +} + +declare module '*.png' { + const src: string; + export default src; +} + +declare module '*.webp' { + const src: string; + export default src; +} + +declare module '*.css' { + const classes: { [key: string]: string }; + export default classes; +} + +declare module '*.less' { + const classes: { [key: string]: string }; + export default classes; +} From 26d73c663654e7840a586b65537b54ce3becce46 Mon Sep 17 00:00:00 2001 From: Renuka Atale Date: Mon, 16 Sep 2019 15:54:49 -0700 Subject: [PATCH 2/6] Add: tutorial for typescript using Enact --- tutorial-typescript-enact/README.md | 256 ++++++ tutorial-typescript-enact/package-lock.json | 783 ++++++++++++++++++ tutorial-typescript-enact/package.json | 49 ++ .../resources/ilibmanifest.json | 3 + .../src/App/App.module.less | 8 + tutorial-typescript-enact/src/App/App.tsx | 33 + .../src/App/package.json | 3 + .../src/components/Counter/Counter.tsx | 91 ++ .../src/components/Counter/package.json | 3 + .../src/components/README.md | 1 + tutorial-typescript-enact/src/index.tsx | 12 + .../src/views/MainPanel.tsx | 17 + tutorial-typescript-enact/src/views/README.md | 9 + tutorial-typescript-enact/tsconfig.json | 26 + tutorial-typescript-enact/tslint.json | 5 + .../types/react-app-env.d.ts | 49 ++ 16 files changed, 1348 insertions(+) create mode 100644 tutorial-typescript-enact/README.md create mode 100644 tutorial-typescript-enact/package-lock.json create mode 100644 tutorial-typescript-enact/package.json create mode 100644 tutorial-typescript-enact/resources/ilibmanifest.json create mode 100644 tutorial-typescript-enact/src/App/App.module.less create mode 100644 tutorial-typescript-enact/src/App/App.tsx create mode 100644 tutorial-typescript-enact/src/App/package.json create mode 100644 tutorial-typescript-enact/src/components/Counter/Counter.tsx create mode 100644 tutorial-typescript-enact/src/components/Counter/package.json create mode 100644 tutorial-typescript-enact/src/components/README.md create mode 100644 tutorial-typescript-enact/src/index.tsx create mode 100644 tutorial-typescript-enact/src/views/MainPanel.tsx create mode 100644 tutorial-typescript-enact/src/views/README.md create mode 100644 tutorial-typescript-enact/tsconfig.json create mode 100644 tutorial-typescript-enact/tslint.json create mode 100644 tutorial-typescript-enact/types/react-app-env.d.ts diff --git a/tutorial-typescript-enact/README.md b/tutorial-typescript-enact/README.md new file mode 100644 index 00000000..f97af036 --- /dev/null +++ b/tutorial-typescript-enact/README.md @@ -0,0 +1,256 @@ +This project was bootstrapped with [@enact/cli](https://github.com/enactjs/cli). + +Below you will find some information on how to perform common tasks. +You can find the most recent version of this guide [here](https://github.com/enactjs/templates/blob/master/packages/typescript/template/README.md). +Additional documentation on @enact/cli can be found [here](https://github.com/enactjs/cli/blob/master/docs/index.md). + +## Folder Structure + +After creation, your project should look like this: + +``` +my-app/ + README.md + .gitignore + node_modules/ + package.json + tsconfig.json + tslint.json + src/ + App/ + App.tsx + App.less + package.json + components/ + views/ + MainPanel.tsx + index.tsx + resources/ + types/ + react-app-env.d.ts +``` + +For the project to build, **these files must exist with exact filenames**: + +* `package.json` is the core package manifest for the project +* `tsconfig.json` typescript configuration object +* `src/index.tsx` is the TypeScript entry point. + +You can delete or rename the other files. + +You can update the `license` entry in `package.json` to match the license of your choice. For more +information on licenses, please see the [npm documentation](https://docs.npmjs.com/files/package.json#license). + +## Available Scripts + +In the project directory, you can run: + +### `npm run serve` + +Builds and serves the app in the development mode.
+Open [http://localhost:8080](http://localhost:8080) to view it in the browser. + +The page will reload if you make edits.
+ +### `npm run pack` and `npm run pack-p` + +Builds the project in the working directory. Specifically, `pack` builds in development mode with code un-minified and with debug code included, whereas `pack-p` builds in production mode, with everything minified and optimized for performance. Be sure to avoid shipping or performance testing on development mode builds. + +### `npm run watch` + +Builds the project in development mode and keeps watch over the project directory. Whenever files are changed, added, or deleted, the project will automatically get rebuilt using an active shared cache to speed up the process. This is similar to the `serve` task, but without the http server. + +### `npm run clean` + +Deletes previous build fragments from ./dist. + +### `npm run lint` + +Runs syntax analysis on JavaScript files using the Enact configuration of Eslint and on TypeScript files using TSLint. NOTE: For TSLint, no rules are enabled. Update `tslint.json` to add rules. + +### `npm run test` and `npm run test-watch` + +These tasks will execute all valid tests (files that end in `-specs.(js|js|ts|tsx)`) that are within the project directory. The `test` is a standard single execution pass, while `test-watch` will set up a watcher to re-execute tests when files change. + +## Enact Build Options + +The @enact/cli tool will check the project's `package.json` looking for an optional `enact` object for a few customization options: + +* `template` _[string]_ - Filepath to an alternate HTML template to use with the [Webpack html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin). +* `isomorphic` _[string]_ - Alternate filepath to a custom isomorphic-compatible entrypoint. Not needed if main entrypoint is already isomorphic-compatible. +* `title` _[string]_ - Title text that should be put within the HTML's `` tags. +* `theme` _[object]_ - A simplified string name to extrapolate `fontGenerator`, `ri`, and `screenTypes` preset values from. For example, `"moonstone"` +* `fontGenerator` _[string]_ - Filepath to a commonjs fontGenerator module which will build locale-specific font CSS to inject into the HTML. By default will use any preset for a specified theme or fallback to moonstone. +* `ri` _[object]_ - Resolution independence options to be forwarded to the [LESS plugin](https://github.com/enyojs/less-plugin-resolution-independence). By default will use any preset for a specified theme or fallback to moonstone +* `screenTypes` _[array|string]_ - Array of 1 or more screentype definitions to be used with prerender HTML initialization. Can alternatively reference a json filepath to read for screentype definitons. By default will use any preset for a specified theme or fallback to moonstone. +* `nodeBuiltins` _[object]_ - Configuration settings for polyfilling NodeJS built-ins. See `node` [webpack option](https://webpack.js.org/configuration/node/). +* `deep` _[string|array]_ - 1 or more javascript conditions that, when met, indicate deeplinking and any prerender should be discarded. +* `target` _[string|array]_ - A build-type generic preset string (see `target` [webpack option](https://webpack.js.org/configuration/target/)) or alternatively a specific [browserlist array](https://github.com/ai/browserslist) of desired targets. +* `proxy` _[string]_ - Proxy target during project `serve` to be used within the [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware). + +For example: +```js +{ + ... + "enact": { + "theme": "moonstone", + "nodeBuiltins": { + fs: 'empty', + net: 'empty', + tls: 'empty' + } + } + ... +} +``` + +## Displaying Lint Output in the Editor + +Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint. + +They are not required for linting. You should see the linter output right in your terminal as well as the browser console. However, if you prefer the lint results to appear right in your editor, there are some extra steps you can do. + +You would need to install an ESLint plugin for your editor first. + +>**A note for Atom `linter-eslint` users** + +>If you are using the Atom `linter-eslint` plugin, make sure that **Use global ESLint installation** option is checked: + +> + +Then, you will need to install some packages *globally*: + +```sh +npm install -g eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-babel babel-eslint eslint-plugin-jest eslint-plugin-enact eslint-config-enact +``` + +## Installing a Dependency + +The generated project includes Enact (and all its libraries). It also includes React and ReactDOM. For test writing, both Sinon and Enzyme are as development dependencies. You may install other dependencies with `npm`: + +``` +npm install --save +``` + +## Importing a Component + +This project setup supports ES6 modules thanks to Babel. +While you can still use `require()` and `module.exports`, we encourage you to use [`import` and `export`](http://exploringjs.com/es6/ch_modules.html) instead. + +For example: + +### `Button.tsx` + +```js +import kind from '@enact/core/kind'; + +interface ButtonProps = { + color?: string +}; + +// kind() accepts a interface representing the props the component accepts +// You can include support for native DOM attributes as well with a union +const Button = kind({ + render() { + // ... + } +}); + +export default Button; // Don’t forget to use export default! +``` + +### `DangerButton.tsx` + + +```js +import kind from '@enact/core/kind'; +import Button from './Button'; // Import a component from another file + +const DangerButton = kind({ + render(props) { + return + + + + ) +}); + +const Counter = Countable({prop: 'count', increment: 'onIncrementClick', decrement: 'onDecrementClick', reset: 'onResetClick'}, CounterBase); + +export default Counter; +export { + Counter, + CounterBase, + Countable +}; diff --git a/tutorial-typescript-enact/src/components/Counter/package.json b/tutorial-typescript-enact/src/components/Counter/package.json new file mode 100644 index 00000000..c262edb7 --- /dev/null +++ b/tutorial-typescript-enact/src/components/Counter/package.json @@ -0,0 +1,3 @@ +{ + "main": "Counter.tsx" +} \ No newline at end of file diff --git a/tutorial-typescript-enact/src/components/README.md b/tutorial-typescript-enact/src/components/README.md new file mode 100644 index 00000000..b1a7853e --- /dev/null +++ b/tutorial-typescript-enact/src/components/README.md @@ -0,0 +1 @@ +Reusable components for your application go here \ No newline at end of file diff --git a/tutorial-typescript-enact/src/index.tsx b/tutorial-typescript-enact/src/index.tsx new file mode 100644 index 00000000..2c28735a --- /dev/null +++ b/tutorial-typescript-enact/src/index.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import {render} from 'react-dom'; +import App from './App'; + +const appElement = (); + +// In a browser environment, render instead of exporting +if (typeof window !== 'undefined') { + render(appElement, document.getElementById('root')); +} + +export default appElement; diff --git a/tutorial-typescript-enact/src/views/MainPanel.tsx b/tutorial-typescript-enact/src/views/MainPanel.tsx new file mode 100644 index 00000000..400f78e3 --- /dev/null +++ b/tutorial-typescript-enact/src/views/MainPanel.tsx @@ -0,0 +1,17 @@ +import Button from '@enact/moonstone/Button'; +import kind from '@enact/core/kind'; +import {Panel, Header} from '@enact/moonstone/Panels'; +import React from 'react'; + +const MainPanel = kind({ + name: 'MainPanel', + + render: (props) => ( + +
+ + + ) +}); + +export default MainPanel; diff --git a/tutorial-typescript-enact/src/views/README.md b/tutorial-typescript-enact/src/views/README.md new file mode 100644 index 00000000..22425290 --- /dev/null +++ b/tutorial-typescript-enact/src/views/README.md @@ -0,0 +1,9 @@ +## Hello, Enact + +The completed Hello, Enact app from the Enact tutorial. + +Run `npm install` then `npm run serve` to have the app running on [http://localhost:8080](http://localhost:8080), where you can view it in your browser. + +--- + +This project was bootstrapped with the Enact [cli](https://github.com/enactjs/cli). \ No newline at end of file diff --git a/tutorial-typescript-enact/tsconfig.json b/tutorial-typescript-enact/tsconfig.json new file mode 100644 index 00000000..9f54175b --- /dev/null +++ b/tutorial-typescript-enact/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "preserve" + }, + "include": [ + "src", + "types" + ] +} diff --git a/tutorial-typescript-enact/tslint.json b/tutorial-typescript-enact/tslint.json new file mode 100644 index 00000000..cdd04158 --- /dev/null +++ b/tutorial-typescript-enact/tslint.json @@ -0,0 +1,5 @@ +{ + "extends": ["tslint-react"], + "rules": { + } +} diff --git a/tutorial-typescript-enact/types/react-app-env.d.ts b/tutorial-typescript-enact/types/react-app-env.d.ts new file mode 100644 index 00000000..5fd81f94 --- /dev/null +++ b/tutorial-typescript-enact/types/react-app-env.d.ts @@ -0,0 +1,49 @@ +/// +/// +/// + +declare namespace NodeJS { + interface ProcessEnv { + NODE_ENV: 'development' | 'production' | 'test' + } +} + +declare module '*.bmp' { + const src: string; + export default src; +} + +declare module '*.gif' { + const src: string; + export default src; +} + +declare module '*.jpg' { + const src: string; + export default src; +} + +declare module '*.jpeg' { + const src: string; + export default src; +} + +declare module '*.png' { + const src: string; + export default src; +} + +declare module '*.webp' { + const src: string; + export default src; +} + +declare module '*.css' { + const classes: { [key: string]: string }; + export default classes; +} + +declare module '*.less' { + const classes: { [key: string]: string }; + export default classes; +} From 6c76da13020f471c4c82c41b46a19bcf8cb2056b Mon Sep 17 00:00:00 2001 From: Renuka Atale Date: Tue, 17 Sep 2019 14:50:34 -0700 Subject: [PATCH 3/6] fix: changes requested after the PR review --- tutorial-typescript-enact/.eslintignore | 3 +++ tutorial-typescript-enact/package.json | 2 +- tutorial-typescript-enact/src/App/App.module.less | 2 -- tutorial-typescript-enact/src/App/App.tsx | 8 ++------ .../src/components/Counter/Counter.tsx | 4 ++-- tutorial-typescript-enact/tslint.json | 1 + 6 files changed, 9 insertions(+), 11 deletions(-) create mode 100644 tutorial-typescript-enact/.eslintignore diff --git a/tutorial-typescript-enact/.eslintignore b/tutorial-typescript-enact/.eslintignore new file mode 100644 index 00000000..860fbccf --- /dev/null +++ b/tutorial-typescript-enact/.eslintignore @@ -0,0 +1,3 @@ +node_modules/* +build/* +dist/* \ No newline at end of file diff --git a/tutorial-typescript-enact/package.json b/tutorial-typescript-enact/package.json index 3fa48bee..b9ce8ba9 100644 --- a/tutorial-typescript-enact/package.json +++ b/tutorial-typescript-enact/package.json @@ -1,5 +1,5 @@ { - "name": "myapp", + "name": "typescript-enact-app", "version": "1.0.0", "description": "A general template for an Enact Typescript application.", "author": "", diff --git a/tutorial-typescript-enact/src/App/App.module.less b/tutorial-typescript-enact/src/App/App.module.less index 3720252c..e31c0415 100644 --- a/tutorial-typescript-enact/src/App/App.module.less +++ b/tutorial-typescript-enact/src/App/App.module.less @@ -1,8 +1,6 @@ .app { // styles can be put here font-size: 48px; - background-color: white; - color: teal; text-align: center; margin: 0 auto; } diff --git a/tutorial-typescript-enact/src/App/App.tsx b/tutorial-typescript-enact/src/App/App.tsx index 698499d1..93791d9a 100644 --- a/tutorial-typescript-enact/src/App/App.tsx +++ b/tutorial-typescript-enact/src/App/App.tsx @@ -1,11 +1,9 @@ import React from 'react'; //enact import import kind from '@enact/core/kind'; -import Panels from '@enact/moonstone/Panels'; //enact Moonstone import import MoonstoneDecorator from '@enact/moonstone/MoonstoneDecorator'; import BodyText from '@enact/moonstone/BodyText'; -import Skinnable from '@enact/moonstone/Skinnable'; //Custom component import Counter from '../components/Counter'; @@ -21,11 +19,9 @@ const App = kind({ }, render: (props) => ( -
-
+
Hello Enact + TypeScript! - -
+
) }); diff --git a/tutorial-typescript-enact/src/components/Counter/Counter.tsx b/tutorial-typescript-enact/src/components/Counter/Counter.tsx index 5a3c64d3..fcd51334 100644 --- a/tutorial-typescript-enact/src/components/Counter/Counter.tsx +++ b/tutorial-typescript-enact/src/components/Counter/Counter.tsx @@ -74,9 +74,9 @@ const CounterBase = kind({ render: ({onIncrementClick, onDecrementClick, onResetClick, count}) => (

{count}

- - + +
) }); diff --git a/tutorial-typescript-enact/tslint.json b/tutorial-typescript-enact/tslint.json index cdd04158..59662bf1 100644 --- a/tutorial-typescript-enact/tslint.json +++ b/tutorial-typescript-enact/tslint.json @@ -1,5 +1,6 @@ { "extends": ["tslint-react"], "rules": { + "jsx-boolean-value": ["never"] } } From f1116dd80363e5c305f20bb5d418205a92f57f0d Mon Sep 17 00:00:00 2001 From: Renuka Atale Date: Tue, 17 Sep 2019 16:16:21 -0700 Subject: [PATCH 4/6] Update: description in package after PR review --- tutorial-typescript-enact/package.json | 2 +- tutorial-typescript-enact/src/App/App.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/tutorial-typescript-enact/package.json b/tutorial-typescript-enact/package.json index b9ce8ba9..a92c9df6 100644 --- a/tutorial-typescript-enact/package.json +++ b/tutorial-typescript-enact/package.json @@ -1,7 +1,7 @@ { "name": "typescript-enact-app", "version": "1.0.0", - "description": "A general template for an Enact Typescript application.", + "description": "A simple App to introduce Typescript with Enact in application.", "author": "", "main": "src/index.tsx", "scripts": { diff --git a/tutorial-typescript-enact/src/App/App.tsx b/tutorial-typescript-enact/src/App/App.tsx index 93791d9a..340047e3 100644 --- a/tutorial-typescript-enact/src/App/App.tsx +++ b/tutorial-typescript-enact/src/App/App.tsx @@ -19,7 +19,7 @@ const App = kind({ }, render: (props) => ( -
+
Hello Enact + TypeScript!
From 63844a4204017c3fcb082cfe1b558521af860096 Mon Sep 17 00:00:00 2001 From: Renuka Atale Date: Wed, 18 Sep 2019 18:09:40 -0700 Subject: [PATCH 5/6] WIP for removing hoc but keep Kind --- .../src/App/App.module.less | 3 - tutorial-typescript-enact/src/App/App.tsx | 16 ++-- .../src/components/Counter/Counter.tsx | 93 +++++++------------ .../src/views/MainPanel.tsx | 8 +- 4 files changed, 48 insertions(+), 72 deletions(-) diff --git a/tutorial-typescript-enact/src/App/App.module.less b/tutorial-typescript-enact/src/App/App.module.less index e31c0415..23782def 100644 --- a/tutorial-typescript-enact/src/App/App.module.less +++ b/tutorial-typescript-enact/src/App/App.module.less @@ -1,6 +1,3 @@ .app { // styles can be put here - font-size: 48px; - text-align: center; - margin: 0 auto; } diff --git a/tutorial-typescript-enact/src/App/App.tsx b/tutorial-typescript-enact/src/App/App.tsx index 340047e3..960f23e7 100644 --- a/tutorial-typescript-enact/src/App/App.tsx +++ b/tutorial-typescript-enact/src/App/App.tsx @@ -1,13 +1,10 @@ -import React from 'react'; -//enact import import kind from '@enact/core/kind'; -//enact Moonstone import import MoonstoneDecorator from '@enact/moonstone/MoonstoneDecorator'; -import BodyText from '@enact/moonstone/BodyText'; -//Custom component -import Counter from '../components/Counter'; +import Panels from '@enact/moonstone/Panels'; +import React from 'react'; + +import MainPanel from '../views/MainPanel'; -//css import css from './App.module.less'; const App = kind({ @@ -20,8 +17,9 @@ const App = kind({ render: (props) => (
- Hello Enact + TypeScript! - + + +
) }); diff --git a/tutorial-typescript-enact/src/components/Counter/Counter.tsx b/tutorial-typescript-enact/src/components/Counter/Counter.tsx index fcd51334..50eba72e 100644 --- a/tutorial-typescript-enact/src/components/Counter/Counter.tsx +++ b/tutorial-typescript-enact/src/components/Counter/Counter.tsx @@ -1,76 +1,56 @@ +import React from 'react'; +import PropTypes from 'prop-types'; import kind from '@enact/core/kind'; -import hoc from '@enact/core/hoc'; import Button from '@enact/moonstone/Button'; -import {adaptEvent, forward, handle} from '@enact/core/handle'; -import PropTypes from 'prop-types'; -import Slider from '@enact/ui/Slider'; -import React from 'react'; interface countableStateProps { - count : number, + count : number, } -interface configInterface { - prop: 'data-count', - count: 0, - increment? : string, - decrement ? : string, - reset ? : string -} -interface countType { - [key:string] : any -} -const defaultConfig: countType = { - prop: 'data-count', - count: 0, - increment: void 0, - decrement: void 0, - reset : void 0 -} +class Counter extends React.Component < {}, countableStateProps> { + state : countableStateProps = { + count: 0 + }; + increment = () => this.setState({count: this.state.count + 1}) + decrement = () => this.setState({count: this.state.count - 1}) + reset = () => this.setState({count: 0}) -//Counter component using HOC (Higher order component) -const Countable = hoc({defaultConfig}, (config: configInterface, Wrapped: React.ComponentType) => { - return class extends React.Component < {}, countableStateProps> { - state = { - count: 0 - }; - inc = () => this.setState({count: this.state.count + 1}) - dec = () => this.setState({count: this.state.count - 1}) - reset = () => this.setState({count: 0}) - render () { - const props: countType = Object.assign({}, this.props, { - [config.prop]: this.state.count, - }); - if (config.increment) props[config.increment] = this.inc - if (config.decrement) props[config.decrement] = this.dec - if (config.reset) props[config.reset] = this.reset + render () { + return( + + //Just render the component ? Do we need CounterBase + //
+ //

{this.state.count}

+ // + // + // + //
+ + //pass the props to CounterBase + - return - } - } -}); + + + ) + } + +} const CounterBase = kind({ name: 'Counter', propTypes: { - children: PropTypes.string, - count: PropTypes.number, onIncrementClick: PropTypes.func.isRequired, - onDecrementClick : PropTypes.func.isRequired + onDecrementClick: PropTypes.func.isRequired, + onResetClick: PropTypes.func.isRequired, + count: PropTypes.number, }, defaultProps: { count: 0 }, - handlers: { - onIncrementClick: handle(adaptEvent(() => ({type: 'onClick'}), forward('onIncrementClick'))), - onDecrementClick: handle(adaptEvent(() => ({type: 'onClick'}), forward('onDecrementClick'))), - onResetClick: handle(adaptEvent(() => ({type: 'onClick'}), forward('onResetClick'))) - }, - render: ({onIncrementClick, onDecrementClick, onResetClick, count}) => (

{count}

@@ -78,14 +58,13 @@ const CounterBase = kind({
+ + //OR render Component Counter with props ) }); -const Counter = Countable({prop: 'count', increment: 'onIncrementClick', decrement: 'onDecrementClick', reset: 'onResetClick'}, CounterBase); - -export default Counter; +export default CounterBase; export { Counter, - CounterBase, - Countable + CounterBase }; diff --git a/tutorial-typescript-enact/src/views/MainPanel.tsx b/tutorial-typescript-enact/src/views/MainPanel.tsx index 400f78e3..13fe9285 100644 --- a/tutorial-typescript-enact/src/views/MainPanel.tsx +++ b/tutorial-typescript-enact/src/views/MainPanel.tsx @@ -1,15 +1,17 @@ -import Button from '@enact/moonstone/Button'; import kind from '@enact/core/kind'; import {Panel, Header} from '@enact/moonstone/Panels'; import React from 'react'; +//Custom component +import Counter from '../components/Counter' + const MainPanel = kind({ name: 'MainPanel', render: (props) => ( -
- +
+ ) }); From cd519b710508838ff1c506379d67a62b43936c59 Mon Sep 17 00:00:00 2001 From: Renuka Atale Date: Thu, 19 Sep 2019 12:41:51 -0700 Subject: [PATCH 6/6] revert changes for removing hoc from tutorial --- .../src/components/Counter/Counter.tsx | 94 +++++++++++-------- 1 file changed, 57 insertions(+), 37 deletions(-) diff --git a/tutorial-typescript-enact/src/components/Counter/Counter.tsx b/tutorial-typescript-enact/src/components/Counter/Counter.tsx index 50eba72e..00bf31da 100644 --- a/tutorial-typescript-enact/src/components/Counter/Counter.tsx +++ b/tutorial-typescript-enact/src/components/Counter/Counter.tsx @@ -1,70 +1,90 @@ -import React from 'react'; -import PropTypes from 'prop-types'; import kind from '@enact/core/kind'; +import hoc from '@enact/core/hoc'; import Button from '@enact/moonstone/Button'; +import {adaptEvent, forward, handle} from '@enact/core/handle'; +import PropTypes from 'prop-types'; +import React from 'react'; interface countableStateProps { - count : number, + count : number, } -class Counter extends React.Component < {}, countableStateProps> { - state : countableStateProps = { - count: 0 - }; - increment = () => this.setState({count: this.state.count + 1}) - decrement = () => this.setState({count: this.state.count - 1}) - reset = () => this.setState({count: 0}) - - render () { - return( - - //Just render the component ? Do we need CounterBase - //
- //

{this.state.count}

- // - // - // - //
- - //pass the props to CounterBase - - - +interface configInterface { + prop: 'data-count', + count: 0, + increment? : string, + decrement ? : string, + reset ? : string +} +interface countType { + [key:string] : any +} +const defaultConfig: countType = { + prop: 'data-count', + count: 0, + increment: void 0, + decrement: void 0, + reset : void 0 +} - ) - } +//Counter component using HOC (Higher order component) +const Countable = hoc({defaultConfig}, (config: configInterface, Wrapped: React.ComponentType) => { + return class extends React.Component < {}, countableStateProps> { + state = { + count: 0 + }; + inc = () => this.setState({count: this.state.count + 1}) + dec = () => this.setState({count: this.state.count - 1}) + reset = () => this.setState({count: 0}) + render () { + const props: countType = Object.assign({}, this.props, { + [config.prop]: this.state.count, + }); + if (config.increment) props[config.increment] = this.inc + if (config.decrement) props[config.decrement] = this.dec + if (config.reset) props[config.reset] = this.reset -} + return + } + } +}); const CounterBase = kind({ name: 'Counter', propTypes: { onIncrementClick: PropTypes.func.isRequired, - onDecrementClick: PropTypes.func.isRequired, onResetClick: PropTypes.func.isRequired, - count: PropTypes.number, + onDecrementClick : PropTypes.func.isRequired, + count: PropTypes.number }, defaultProps: { count: 0 }, + handlers: { + onIncrementClick: handle(adaptEvent(() => ({type: 'onClick'}), forward('onIncrementClick'))), + onDecrementClick: handle(adaptEvent(() => ({type: 'onClick'}), forward('onDecrementClick'))), + onResetClick: handle(adaptEvent(() => ({type: 'onClick'}), forward('onResetClick'))) + }, + render: ({onIncrementClick, onDecrementClick, onResetClick, count}) => (

{count}

- - + +
- - //OR render Component Counter with props ) }); -export default CounterBase; +const Counter = Countable({prop: 'count', increment: 'onIncrementClick', decrement: 'onDecrementClick', reset: 'onResetClick'}, CounterBase); + +export default Counter; export { Counter, - CounterBase + CounterBase, + Countable };