feat(create-app): native esm templates

packages/create-stylable-app/template/ts-react-rollup/.eslintrc

@@ -12,6 +12,9 @@
   ],
   "plugins": ["react-hooks"],
   "ignorePatterns": ["node_modules", "dist", "st-types"],
+  "parserOptions": {
+    "sourceType": "module"
+  },
   "settings": {
     "react": {
       "version": "detect"

packages/create-stylable-app/template/ts-react-rollup/.prettierrc

@@ -3,7 +3,7 @@
   "singleQuote": true,
   "overrides": [
     {
-      "files": ["*.js", "*.ts", "*.tsx"],
+      "files": ["*.js", "*.cjs", "*.mjs", "*.ts", "*.tsx", "*.cts", "*.mts"],
       "options": {
         "tabWidth": 4
       }

packages/create-stylable-app/template/ts-react-rollup/rollup.config.js

@@ -0,0 +1,44 @@
+// @ts-check
+
+import { stylableRollupPlugin } from '@stylable/rollup-plugin';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import html from '@rollup/plugin-html';
+import image from '@rollup/plugin-image';
+import replace from '@rollup/plugin-replace';
+import rollupTypescript from '@rollup/plugin-typescript';
+import copy from 'rollup-plugin-copy';
+import serve from 'rollup-plugin-serve';
+
+const isProductionMode = process.env.NODE_ENV === 'production';
+
+/** @type {import('rollup').RollupOptions} */
+export default {
+    input: 'src/index.tsx',
+    output: {
+        file: 'dist/bundle.js',
+        format: 'umd',
+        sourcemap: !isProductionMode,
+    },
+    plugins: [
+        replace({
+            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV ?? 'production'),
+            preventAssignment: true,
+        }),
+        image(),
+        nodeResolve(),
+        commonjs(),
+        html({}),
+        rollupTypescript({ compilerOptions: { sourceMap: !isProductionMode } }),
+        stylableRollupPlugin({ stcConfig: true, optimization: { minify: isProductionMode } }),
+        copy({
+            targets: [{ src: 'favicon.ico', dest: 'dist' }],
+        }),
+        !isProductionMode &&
+            serve({
+                open: true,
+                contentBase: ['dist'],
+                port: 3000,
+            }),
+    ],
+};

packages/create-stylable-app/template/ts-react-rollup/stylable.config.js → packages/create-stylable-app/template/ts-react-rollup/stylable.config.cjs

@@ -1,11 +1,11 @@
-//@ts-check
+// @ts-check
+
 const { typedConfiguration } = require('@stylable/cli');
 
 exports.stcConfig = typedConfiguration({
     options: {
         srcDir: './src',
         outDir: './st-types',
         dts: true,
-        cjs: false,
     },
 });

packages/create-stylable-app/template/ts-react-rollup/template.js

@@ -1,4 +1,5 @@
-//@ts-check
+// @ts-check
+
 /** @type {import('create-stylable-app').TemplateDefinition} */
 module.exports = {
     dependencies: ['react', 'react-dom'],
@@ -31,6 +32,7 @@ module.exports = {
         description: 'Stylable App',
         private: true,
         license: 'UNLICENSED',
+        type: 'module',
         scripts: {
             clean: 'rimraf dist',
             prebuild: 'npm run clean',

packages/create-stylable-app/template/ts-react-webpack-lean/.eslintrc

@@ -12,6 +12,9 @@
   ],
   "plugins": ["react-hooks"],
   "ignorePatterns": ["node_modules", "dist", "st-types"],
+  "parserOptions": {
+    "sourceType": "module"
+  },
   "settings": {
     "react": {
       "version": "detect"

packages/create-stylable-app/template/ts-react-webpack-lean/.prettierrc

@@ -3,7 +3,7 @@
   "singleQuote": true,
   "overrides": [
     {
-      "files": ["*.js", "*.ts", "*.tsx"],
+      "files": ["*.js", "*.cjs", "*.mjs", "*.ts", "*.tsx", "*.cts", "*.mts"],
       "options": {
         "tabWidth": 4
       }

packages/create-stylable-app/template/ts-react-webpack-lean/stylable.config.js → packages/create-stylable-app/template/ts-react-webpack-lean/stylable.config.cjs

@@ -1,11 +1,11 @@
-//@ts-check
+// @ts-check
+
 const { typedConfiguration } = require('@stylable/cli');
 
 exports.stcConfig = typedConfiguration({
     options: {
         srcDir: './src',
         outDir: './st-types',
         dts: true,
-        cjs: false,
     },
 });

packages/create-stylable-app/template/ts-react-webpack-lean/template.js

@@ -1,4 +1,5 @@
-//@ts-check
+// @ts-check
+
 /** @type {import('create-stylable-app').TemplateDefinition} */
 module.exports = {
     dependencies: ['react', 'react-dom'],
@@ -27,6 +28,7 @@ module.exports = {
         description: 'Stylable App',
         private: true,
         license: 'UNLICENSED',
+        type: 'module',
         scripts: {
             clean: 'rimraf dist',
             prebuild: 'npm run clean',

packages/create-stylable-app/template/ts-react-webpack-lean/webpack.config.js

@@ -1,8 +1,10 @@
-const { StylableWebpackPlugin } = require('@stylable/webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+// @ts-check
+
+import { StylableWebpackPlugin } from '@stylable/webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
 
 /** @type {import('webpack').Configuration} */
-module.exports = {
+export default {
     mode: 'development',
     devtool: 'source-map',
     module: {

packages/create-stylable-app/template/ts-react-webpack/.eslintrc

@@ -12,6 +12,9 @@
   ],
   "plugins": ["react-hooks"],
   "ignorePatterns": ["node_modules", "dist", "st-types"],
+  "parserOptions": {
+    "sourceType": "module"
+  },
   "settings": {
     "react": {
       "version": "detect"

packages/create-stylable-app/template/ts-react-webpack/.prettierrc

@@ -3,7 +3,7 @@
   "singleQuote": true,
   "overrides": [
     {
-      "files": ["*.js", "*.ts", "*.tsx"],
+      "files": ["*.js", "*.cjs", "*.mjs", "*.ts", "*.tsx", "*.cts", "*.mts"],
       "options": {
         "tabWidth": 4
       }

packages/create-stylable-app/template/ts-react-webpack/stylable.config.js → packages/create-stylable-app/template/ts-react-webpack/stylable.config.cjs

@@ -1,11 +1,11 @@
-//@ts-check
+// @ts-check
+
 const { typedConfiguration } = require('@stylable/cli');
 
 exports.stcConfig = typedConfiguration({
     options: {
         srcDir: './src',
         outDir: './st-types',
         dts: true,
-        cjs: false,
     },
 });

packages/create-stylable-app/template/ts-react-webpack/template.js

@@ -1,4 +1,5 @@
-//@ts-check
+// @ts-check
+
 /** @type {import('create-stylable-app').TemplateDefinition} */
 module.exports = {
     dependencies: ['react', 'react-dom'],
@@ -27,6 +28,7 @@ module.exports = {
         description: 'Stylable App',
         private: true,
         license: 'UNLICENSED',
+        type: 'module',
         scripts: {
             clean: 'rimraf dist',
             prebuild: 'npm run clean',

packages/create-stylable-app/template/ts-react-webpack/webpack.config.js

@@ -1,8 +1,10 @@
-const { StylableWebpackPlugin } = require('@stylable/webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+// @ts-check
+
+import { StylableWebpackPlugin } from '@stylable/webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
 
 /** @type {import('webpack').Configuration} */
-module.exports = {
+export default {
     mode: 'development',
     devtool: 'source-map',
     module: {