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/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..13fe9285 --- /dev/null +++ b/tutorial-typescript-enact/src/views/MainPanel.tsx @@ -0,0 +1,19 @@ +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) => ( + +
+ + + ) +}); + +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..59662bf1 --- /dev/null +++ b/tutorial-typescript-enact/tslint.json @@ -0,0 +1,6 @@ +{ + "extends": ["tslint-react"], + "rules": { + "jsx-boolean-value": ["never"] + } +} 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; +}