├── vite.config.ts ├── .gitignore ├── package.json ├── index.html ├── src └── my-element.ts ├── README.md ├── docs └── README-es.md ├── yarn.lock └── tsconfig.json /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | 3 | export default defineConfig({}); 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .git 3 | build 4 | node_modules 5 | .DS_Store 6 | dist/ 7 | .history 8 | *.log 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lit-simple-starter-kit", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "dev": "vite" 8 | }, 9 | "dependencies": { 10 | "lit": "^2.0.0-rc.2" 11 | }, 12 | "devDependencies": { 13 | "@types/node": "^15.12.1", 14 | "vite": "^2.3.6" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Lit Element Simple Starter Kit 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/my-element.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, html, css } from "lit"; 2 | import { customElement, property } from "lit/decorators.js"; 3 | 4 | @customElement("my-element") 5 | export class MyElement extends LitElement { 6 | static styles = [ 7 | css` 8 | :host { 9 | display: block; 10 | } 11 | ` 12 | ]; 13 | 14 | @property() name = "World"; 15 | 16 | render() { 17 | return html`

Hello, ${this.name}

`; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | lang: [es](./docs/README-es.md) | ***en*** 2 | 3 | When starting with a new framework or super class such as Lit Element, Vue, React or angular, we find "starter kits" that have too much information that in principle is not useful or we do not know what certain files are for. 4 | 5 | Today we have many configuration files which make Web development more complex but at the same time more robust. 6 | 7 | The idea of ​​this post is to introduce new developers to `Lit` with a fairly simple template that allows them to play with it locally and after playing with it for a while and you understand how everything works, you can start integrating more configurations to the project . 8 | 9 | I highly recommend using `typescript`. Programming in pure `javascript` in 2021 is no longer an option. I personally consider it a bad practice. If you don't know typescript yet, I recommend you learn it and if you don't want to use it just skip the `tsc` setting and use` .js` or `.mjs` extensions 10 | 11 | ### TLDR; 12 | 13 | ### Requirements 14 | - Have `npm` or` yarn` installed 15 | - Use VS code 16 | - Have installed `lit-plugin` for VS Code. Download: [`lit-plugin by Rune Mehlsen`] (https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin) 17 | 18 | ### Key concepts 19 | 20 | `Yarn`: For this tutorial we will use` yarn` since personally it solves dependencies better, it has more functions that `npm` does not have and is used in other projects. The commands are very similar, don't worry if you haven't seen `yarn` yet. 21 | 22 | [`lit-plugin`] (https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin) Is a syntax highlighting, type checking and code completion for `lit` in VS Code. 23 | 24 | [`Vite`] (https://vitejs.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects. 25 | 26 | ## 🚀 Tutorial 27 | 28 | First we will initialize the project with yarn and leave the default values ​​that it gives us by touching `enter` in all of them. 29 | 30 | ```bash 31 | yarn init 32 | ``` 33 | 34 | ### ⚙️ Dependency installation 35 | After that we install `lit`,` vite` and `typescript` which will be the only thing we need to start. We also need to install `@ types / node` just for VS code to autocomplete some suggestions in the editor. 36 | 37 | ```bash 38 | yarn add lit 39 | yarn add -D vite @types/node typescript 40 | ``` 41 | 42 | ### ⚡️ Vitejs Settings 43 | 44 | We create a file called `vite.config.ts` and inside it we place the following 45 | 46 | ```typescript 47 | import { defineConfig } from "vite"; 48 | 49 | export default defineConfig({}); 50 | ``` 51 | 52 | By default `vite` uses our `index.html` as entrypoint. You can change this configuration according to its [documentation](https://vitejs.dev/config/) 53 | 54 | 55 | ### ⚔️ Typescript Configuration 56 | 57 | The TypeScrip configuration is simple. First we must initialize `typescript`. 58 | 59 | As we already installed `typescript` with` yarn`, it allows us to run the binaries installed in `node_modules/.bin` with `yarn ` unlike `npm` that we have to add `npm run ` 60 | 61 | ```bash 62 | yarn tsc --init 63 | ``` 64 | 65 | Then in the configuration file we must find and change / enable the following options. 66 | ```json 67 | { 68 | "target": "es2020", // Specify ECMAScript target version 69 | "module": "es2020", // Specify module code generation 70 | "moduleResolution": "node", // Specify module resolution strategy 71 | "experimentalDecorators": true // Enables experimental support for ES7 decorators. 72 | } 73 | ``` 74 | 75 | ### 💻 Create our Hello world 76 | 77 | We create a file `my-element.ts` 78 | 79 | ```typescript 80 | import { LitElement, html, css } from "lit"; 81 | import { customElement, property } from "lit/decorators.js"; 82 | 83 | @customElement("my-element") 84 | export class MyElement extends LitElement { 85 | static styles = [ 86 | css` 87 | :host { 88 | display: block; 89 | } 90 | ` 91 | ]; 92 | 93 | @property() name = "World"; 94 | 95 | render() { 96 | return html`

Hello, ${this.name}

`; 97 | } 98 | } 99 | ``` 100 | 101 | 102 | And now we create a file `index.html` that imports by means of` type = "module` our script 103 | ```html 104 | 105 | 106 | 107 | 108 | 109 | 110 | Lit Simple Starter Kit 111 | 112 | 113 | 114 | 115 | 116 | 117 | ``` 118 | 119 | ### 💯 Execution of DevServer 120 | 121 | Finally in our package.json add a `dev` script to make it easier for us to run our development server. 122 | 123 | ```json 124 | "scripts": { 125 | "dev": "vite" 126 | } 127 | ``` 128 | 129 | and now we run our test server with `yarn dev` 130 | 131 | ```bash 132 | $ yarn dev 133 | 134 | vite v2.3.6 dev server running at: 135 | 136 | > Local: http://localhost:3000/ 137 | > Network: use `--host` to expose 138 | ``` 139 | 140 | We enter [https://localhost:3000/](http://localhost:3000/) and we will have our hello world 😃 141 | 142 | # Github 143 | This example is uploaded to github [https://github.com/litelement-dev/lit-simple-starter-kit](https://github.com/litelement-dev/lit-simple-starter-kit) -------------------------------------------------------------------------------- /docs/README-es.md: -------------------------------------------------------------------------------- 1 | lang: [en](https://dev.to/herberthobregon/lit-simple-starter-kit-with-vitejs-typescript-2188) | ***es*** 2 | 3 | Al momento de iniciar con un nuevo framework o super clase como Lit Element, Vue, React o angular nos encontramos con "starter kits" que tienen demasiada información que en principio no nos es util o no sabemos para que sirven ciertos archivos. 4 | 5 | Hoy en dia tenemos muchos archivos de configuración lo que hacer que el desarrollo Web cada dia se vuelva mas complejo pero a la vez mas robusto. 6 | 7 | La idea de este post es intruducir a nuevo desarrolladores a `Lit` con un template bastante simple que le permita jugar con él en local y luego de jugar con él un rato y ya comprenda como funciona todo, pueda empezar a integrar mas configuraciones al proyecto. 8 | 9 | Recomiendo encarecidamente usar `typescript`. Programar en `javascript` puro en el 2021 ya no es una opción. Personalmente lo considero una mala practica. Si aun no sabe typescript, te recomiendo aprenderlo y si no deseas usarlo simplemente omite la configuración de `tsc` y usa extensiones `.js` o `.mjs` 10 | 11 | ### TLDR; 12 | 13 | ### Requisitos 14 | - Tener instalado `npm` o `yarn` 15 | - Usar VS code 16 | - Tener instalado `lit-plugin` para VS Code. Descarga: [`lit-plugin by Rune Mehlsen`](https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin) 17 | 18 | ### Conceptos clave 19 | 20 | `Yarn`: Para este tutorial usaremos `yarn` ya que en lo personal resuelve mejor las dependencias, tiene mas funciones que `npm` no tiene yuso en otros proyectos. Los comandos son muy parecidos no te preocupes si aún no haz visto `yarn`. 21 | 22 | [`lit-plugin`](https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin) Is a syntax highlighting, type checking and code completion for `lit` in VS Code. 23 | 24 | [`Vite`](https://vitejs.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects. 25 | 26 | ## 🚀 Tutorial 27 | 28 | Primero incializaremos el proyecto con yarn y dejamos los valores predeterminados que nos da tocando `enter` en todas. 29 | 30 | ```bash 31 | yarn init 32 | ``` 33 | 34 | ### ⚙️ Instalación de dependencias 35 | Luego de ello instalamos `lit`, `vite` y `typescript` los cuales será lo unico que necesitamos para iniciar. También necesitamos instalar `@types/node` unicamente para que VS code nos autocomplete algunas sugerencias en el editor. 36 | 37 | ```bash 38 | yarn add lit 39 | yarn add -D vite @types/node typescript 40 | ``` 41 | 42 | ### ⚡️ Configuración de Vitejs 43 | 44 | Creamos un archivo que se llame `vite.config.ts` y dentro del él colocamos lo siguiente 45 | 46 | ```typescript 47 | import { defineConfig } from "vite"; 48 | 49 | export default defineConfig({}); 50 | ``` 51 | 52 | Por defecto `vite` usa nuestro `index.html` como entrypoint. Esta configuración la puedes cambiar deacuerdo a su [documentación](https://vitejs.dev/config/) 53 | 54 | 55 | ### ⚔️ Configuracion de Typescript 56 | 57 | La configuracion de TypeScrip es sencilla. Primero debemos inicializar `typescript`. 58 | 59 | Como ya instalamos `typescript` con `yarn`, este permite ejecutar los binarios instalados en `node_modules/.bin` con `yarn ` a diferencia de `npm` que tenemos que agregar la palabra `npm run ` 60 | 61 | ```bash 62 | yarn tsc --init 63 | ``` 64 | 65 | Luego en el archivo de configuración debemos de buscar y cambiar/habilitar las siguientes opciones. 66 | ```json 67 | { 68 | "target": "es2020", // Specify ECMAScript target version 69 | "module": "es2020", // Specify module code generation 70 | "moduleResolution": "node", // Specify module resolution strategy 71 | "experimentalDecorators": true // Enables experimental support for ES7 decorators. 72 | } 73 | ``` 74 | 75 | ### 💻 Crear nuestro Hello world 76 | 77 | Creamos un archivo `my-element.ts` 78 | 79 | ```typescript 80 | import { LitElement, html, css } from "lit"; 81 | import { customElement, property } from "lit/decorators.js"; 82 | 83 | @customElement("my-element") 84 | export class MyElement extends LitElement { 85 | static styles = [ 86 | css` 87 | :host { 88 | display: block; 89 | } 90 | ` 91 | ]; 92 | 93 | @property() name = "World"; 94 | 95 | render() { 96 | return html`

Hello, ${this.name}

`; 97 | } 98 | } 99 | ``` 100 | 101 | 102 | Y ahora creamos un archivo `index.html` que importe por medio de `type="module` nuestro script 103 | 104 | ```html 105 | 106 | 107 | 108 | 109 | 110 | 111 | Lit Simple Starter Kit 112 | 113 | 114 | 115 | 116 | 117 | 118 | ``` 119 | 120 | ### 💯 Ejecución de DevServer 121 | 122 | Por último en nuestro package.json agregar un script `dev` para que nos sea mas fácil ejecutar nuestro servidor de desarrollo. 123 | 124 | ```json 125 | "scripts": { 126 | "dev": "vite" 127 | } 128 | ``` 129 | 130 | y ahora ejecutamos nuestro servidor de pruebas con `yarn dev` 131 | 132 | ```bash 133 | $ yarn dev 134 | 135 | vite v2.3.6 dev server running at: 136 | 137 | > Local: http://localhost:3000/ 138 | > Network: use `--host` to expose 139 | ``` 140 | 141 | Ingresamos a [https://localhost:3000/](http://localhost:3000/) y tendrémos nuestro hello world 😃 142 | 143 | # Github 144 | Este ejemplo esa subido a github [https://github.com/litelement-dev/lit-simple-starter-kit](https://github.com/litelement-dev/lit-simple-starter-kit) 145 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | "@lit/reactive-element@^1.0.0-rc.2": 6 | version "1.0.0-rc.2" 7 | resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.0.0-rc.2.tgz#f24dba16ea571a08dca70f1783bd2ca5ec8de3ee" 8 | integrity sha512-cujeIl5Ei8FC7UHf4/4Q3bRJOtdTe1vpJV/JEBYCggedmQ+2P8A2oz7eE+Vxi6OJ4nc0X+KZxXnBoH4QrEbmEQ== 9 | 10 | "@types/node@^15.12.1": 11 | version "15.12.1" 12 | resolved "https://registry.yarnpkg.com/@types/node/-/node-15.12.1.tgz#9b60797dee1895383a725f828a869c86c6caa5c2" 13 | integrity sha512-zyxJM8I1c9q5sRMtVF+zdd13Jt6RU4r4qfhTd7lQubyThvLfx6yYekWSQjGCGV2Tkecgxnlpl/DNlb6Hg+dmEw== 14 | 15 | "@types/trusted-types@^1.0.1": 16 | version "1.0.6" 17 | resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-1.0.6.tgz#569b8a08121d3203398290d602d84d73c8dcf5da" 18 | integrity sha512-230RC8sFeHoT6sSUlRO6a8cAnclO06eeiq1QDfiv2FGCLWFvvERWgwIQD4FWqD9A69BN7Lzee4OXwoMVnnsWDw== 19 | 20 | colorette@^1.2.2: 21 | version "1.2.2" 22 | resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94" 23 | integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w== 24 | 25 | esbuild@^0.12.5: 26 | version "0.12.6" 27 | resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.6.tgz#85bc755c7cf3005d4f34b4f10f98049ce0ee67ce" 28 | integrity sha512-RDvVLvAjsq/kIZJoneMiUOH7EE7t2QaW7T3Q7EdQij14+bZbDq5sndb0tTanmHIFSqZVMBMMyqzVHkS3dJobeA== 29 | 30 | fsevents@~2.3.1: 31 | version "2.3.2" 32 | resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" 33 | integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== 34 | 35 | function-bind@^1.1.1: 36 | version "1.1.1" 37 | resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" 38 | integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A== 39 | 40 | has@^1.0.3: 41 | version "1.0.3" 42 | resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796" 43 | integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw== 44 | dependencies: 45 | function-bind "^1.1.1" 46 | 47 | is-core-module@^2.2.0: 48 | version "2.4.0" 49 | resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.4.0.tgz#8e9fc8e15027b011418026e98f0e6f4d86305cc1" 50 | integrity sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A== 51 | dependencies: 52 | has "^1.0.3" 53 | 54 | lit-element@^3.0.0-rc.2: 55 | version "3.0.0-rc.2" 56 | resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-3.0.0-rc.2.tgz#883d0b6fd7b846226d360699d1b713da5fc7e1b7" 57 | integrity sha512-2Z7DabJ3b5K+p5073vFjMODoaWqy5PIaI4y6ADKm+fCGc8OnX9fU9dMoUEBZjFpd/bEFR9PBp050tUtBnT9XTQ== 58 | dependencies: 59 | "@lit/reactive-element" "^1.0.0-rc.2" 60 | lit-html "^2.0.0-rc.3" 61 | 62 | lit-html@^2.0.0-rc.3: 63 | version "2.0.0-rc.3" 64 | resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.0.0-rc.3.tgz#1c216e548630e18d3093d97f4e29563abce659af" 65 | integrity sha512-Y6P8LlAyQuqvzq6l/Nc4z5/P5M/rVLYKQIRxcNwSuGajK0g4kbcBFQqZmgvqKG+ak+dHZjfm2HUw9TF5N/pkCw== 66 | dependencies: 67 | "@types/trusted-types" "^1.0.1" 68 | 69 | lit@^2.0.0-rc.2: 70 | version "2.0.0-rc.2" 71 | resolved "https://registry.yarnpkg.com/lit/-/lit-2.0.0-rc.2.tgz#724a2d621aa098001d73bf7106f3a72b7b5948ef" 72 | integrity sha512-BOCuoJR04WaTV8UqTKk09cNcQA10Aq2LCcBOiHuF7TzWH5RNDsbCBP5QM9sLBSotGTXbDug/gFO08jq6TbyEtw== 73 | dependencies: 74 | "@lit/reactive-element" "^1.0.0-rc.2" 75 | lit-element "^3.0.0-rc.2" 76 | lit-html "^2.0.0-rc.3" 77 | 78 | nanoid@^3.1.23: 79 | version "3.1.23" 80 | resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81" 81 | integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw== 82 | 83 | path-parse@^1.0.6: 84 | version "1.0.7" 85 | resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735" 86 | integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== 87 | 88 | postcss@^8.2.10: 89 | version "8.3.0" 90 | resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.0.tgz#b1a713f6172ca427e3f05ef1303de8b65683325f" 91 | integrity sha512-+ogXpdAjWGa+fdYY5BQ96V/6tAo+TdSSIMP5huJBIygdWwKtVoB5JWZ7yUd4xZ8r+8Kvvx4nyg/PQ071H4UtcQ== 92 | dependencies: 93 | colorette "^1.2.2" 94 | nanoid "^3.1.23" 95 | source-map-js "^0.6.2" 96 | 97 | resolve@^1.19.0: 98 | version "1.20.0" 99 | resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975" 100 | integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A== 101 | dependencies: 102 | is-core-module "^2.2.0" 103 | path-parse "^1.0.6" 104 | 105 | rollup@^2.38.5: 106 | version "2.50.6" 107 | resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.50.6.tgz#24e2211caf9031081656e98a5e5e94d3b5e786e2" 108 | integrity sha512-6c5CJPLVgo0iNaZWWliNu1Kl43tjP9LZcp6D/tkf2eLH2a9/WeHxg9vfTFl8QV/2SOyaJX37CEm9XuGM0rviUg== 109 | optionalDependencies: 110 | fsevents "~2.3.1" 111 | 112 | source-map-js@^0.6.2: 113 | version "0.6.2" 114 | resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e" 115 | integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug== 116 | 117 | vite@^2.3.6: 118 | version "2.3.6" 119 | resolved "https://registry.yarnpkg.com/vite/-/vite-2.3.6.tgz#1f7cfde88a51a802d69000c7bac85d481c2e871c" 120 | integrity sha512-fsEpNKDHgh3Sn66JH06ZnUBnIgUVUtw6ucDhlOj1CEqxIkymU25yv1/kWDPlIjyYHnalr0cN6V+zzUJ+fmWHYw== 121 | dependencies: 122 | esbuild "^0.12.5" 123 | postcss "^8.2.10" 124 | resolve "^1.19.0" 125 | rollup "^2.38.5" 126 | optionalDependencies: 127 | fsevents "~2.3.1" 128 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Visit https://aka.ms/tsconfig.json to read more about this file */ 4 | 5 | /* Basic Options */ 6 | // "incremental": true, /* Enable incremental compilation */ 7 | "target": "es2020", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */ 8 | "module": "es2020", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ 9 | // "lib": [], /* Specify library files to be included in the compilation. */ 10 | // "allowJs": true, /* Allow javascript files to be compiled. */ 11 | // "checkJs": true, /* Report errors in .js files. */ 12 | // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */ 13 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 14 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 15 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 16 | // "outFile": "./", /* Concatenate and emit output to single file. */ 17 | // "outDir": "./", /* Redirect output structure to the directory. */ 18 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 19 | // "composite": true, /* Enable project compilation */ 20 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ 21 | // "removeComments": true, /* Do not emit comments to output. */ 22 | // "noEmit": true, /* Do not emit outputs. */ 23 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 24 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 25 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 26 | 27 | /* Strict Type-Checking Options */ 28 | "strict": true, /* Enable all strict type-checking options. */ 29 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 30 | // "strictNullChecks": true, /* Enable strict null checks. */ 31 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 32 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ 33 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 34 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 35 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 36 | 37 | /* Additional Checks */ 38 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 39 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 40 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 41 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 42 | // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ 43 | // "noPropertyAccessFromIndexSignature": true, /* Require undeclared properties from index signatures to use element accesses. */ 44 | 45 | /* Module Resolution Options */ 46 | "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 47 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 48 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 49 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 50 | // "typeRoots": [], /* List of folders to include type definitions from. */ 51 | // "types": [], /* Type declaration files to be included in compilation. */ 52 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 53 | "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 54 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 55 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 56 | 57 | /* Source Map Options */ 58 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 59 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 60 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 61 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 62 | 63 | /* Experimental Options */ 64 | "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 65 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 66 | 67 | /* Advanced Options */ 68 | "skipLibCheck": true, /* Skip type checking of declaration files. */ 69 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ 70 | } 71 | } 72 | --------------------------------------------------------------------------------