From 1c1681a3b225ac9eadeae80c01977f68ee98b9f4 Mon Sep 17 00:00:00 2001
From: Avi Vahl <avi.vahl@wix.com>
Date: Tue, 26 Jul 2022 12:46:58 +0300
Subject: [PATCH] feat(create-app): native esm templates (#2609)

---
 .../template/ts-react-rollup/.eslintrc        |  3 ++
 .../template/ts-react-rollup/.prettierrc      |  2 +-
 .../ts-react-rollup/rollup.config.cjs         | 43 ------------------
 .../template/ts-react-rollup/rollup.config.js | 44 +++++++++++++++++++
 ...stylable.config.js => stylable.config.cjs} |  4 +-
 .../template/ts-react-rollup/template.js      |  4 +-
 .../template/ts-react-webpack-lean/.eslintrc  |  3 ++
 .../ts-react-webpack-lean/.prettierrc         |  2 +-
 ...stylable.config.js => stylable.config.cjs} |  4 +-
 .../ts-react-webpack-lean/template.js         |  4 +-
 .../ts-react-webpack-lean/webpack.config.js   |  8 ++--
 .../template/ts-react-webpack/.eslintrc       |  3 ++
 .../template/ts-react-webpack/.prettierrc     |  2 +-
 ...stylable.config.js => stylable.config.cjs} |  4 +-
 .../template/ts-react-webpack/template.js     |  4 +-
 .../ts-react-webpack/webpack.config.js        |  8 ++--
 16 files changed, 81 insertions(+), 61 deletions(-)
 delete mode 100644 packages/create-stylable-app/template/ts-react-rollup/rollup.config.cjs
 create mode 100644 packages/create-stylable-app/template/ts-react-rollup/rollup.config.js
 rename packages/create-stylable-app/template/ts-react-rollup/{stylable.config.js => stylable.config.cjs} (86%)
 rename packages/create-stylable-app/template/ts-react-webpack-lean/{stylable.config.js => stylable.config.cjs} (86%)
 rename packages/create-stylable-app/template/ts-react-webpack/{stylable.config.js => stylable.config.cjs} (86%)

diff --git a/packages/create-stylable-app/template/ts-react-rollup/.eslintrc b/packages/create-stylable-app/template/ts-react-rollup/.eslintrc
index 2cad22f26..2631bde80 100644
--- a/packages/create-stylable-app/template/ts-react-rollup/.eslintrc
+++ b/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"
diff --git a/packages/create-stylable-app/template/ts-react-rollup/.prettierrc b/packages/create-stylable-app/template/ts-react-rollup/.prettierrc
index bfd9bf74c..8b9749492 100644
--- a/packages/create-stylable-app/template/ts-react-rollup/.prettierrc
+++ b/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
       }
diff --git a/packages/create-stylable-app/template/ts-react-rollup/rollup.config.cjs b/packages/create-stylable-app/template/ts-react-rollup/rollup.config.cjs
deleted file mode 100644
index 62d50e2d8..000000000
--- a/packages/create-stylable-app/template/ts-react-rollup/rollup.config.cjs
+++ /dev/null
@@ -1,43 +0,0 @@
-const { stylableRollupPlugin } = require('@stylable/rollup-plugin');
-const { nodeResolve } = require('@rollup/plugin-node-resolve');
-const commonjs = require('@rollup/plugin-commonjs');
-const html = require('@rollup/plugin-html');
-const image = require('@rollup/plugin-image');
-const replace = require('@rollup/plugin-replace');
-const rollupTypescript = require('@rollup/plugin-typescript');
-const copy = require('rollup-plugin-copy');
-const serve = require('rollup-plugin-serve');
-
-const isProductionMode = process.env.NODE_ENV === 'production';
-
-/** @type {import('rollup').RollupOptions} */
-module.exports = {
-  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(),
-    stylableRollupPlugin({ stcConfig: true, optimization: { minify: isProductionMode } }),
-    copy({
-      targets: [{ src: 'favicon.ico', dest: 'dist' }],
-    }),
-    !isProductionMode &&
-      serve({
-        open: true,
-        contentBase: ['dist'],
-        port: 3000,
-      }),
-  ],
-};
diff --git a/packages/create-stylable-app/template/ts-react-rollup/rollup.config.js b/packages/create-stylable-app/template/ts-react-rollup/rollup.config.js
new file mode 100644
index 000000000..21ccf3ca3
--- /dev/null
+++ b/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,
+            }),
+    ],
+};
diff --git a/packages/create-stylable-app/template/ts-react-rollup/stylable.config.js b/packages/create-stylable-app/template/ts-react-rollup/stylable.config.cjs
similarity index 86%
rename from packages/create-stylable-app/template/ts-react-rollup/stylable.config.js
rename to packages/create-stylable-app/template/ts-react-rollup/stylable.config.cjs
index 0e97839cd..a0dfda6ce 100644
--- a/packages/create-stylable-app/template/ts-react-rollup/stylable.config.js
+++ b/packages/create-stylable-app/template/ts-react-rollup/stylable.config.cjs
@@ -1,4 +1,5 @@
-//@ts-check
+// @ts-check
+
 const { typedConfiguration } = require('@stylable/cli');
 
 exports.stcConfig = typedConfiguration({
@@ -6,6 +7,5 @@ exports.stcConfig = typedConfiguration({
         srcDir: './src',
         outDir: './st-types',
         dts: true,
-        cjs: false,
     },
 });
diff --git a/packages/create-stylable-app/template/ts-react-rollup/template.js b/packages/create-stylable-app/template/ts-react-rollup/template.js
index ea103145f..1c656ef31 100644
--- a/packages/create-stylable-app/template/ts-react-rollup/template.js
+++ b/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',
diff --git a/packages/create-stylable-app/template/ts-react-webpack-lean/.eslintrc b/packages/create-stylable-app/template/ts-react-webpack-lean/.eslintrc
index 2cad22f26..2631bde80 100644
--- a/packages/create-stylable-app/template/ts-react-webpack-lean/.eslintrc
+++ b/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"
diff --git a/packages/create-stylable-app/template/ts-react-webpack-lean/.prettierrc b/packages/create-stylable-app/template/ts-react-webpack-lean/.prettierrc
index bfd9bf74c..8b9749492 100644
--- a/packages/create-stylable-app/template/ts-react-webpack-lean/.prettierrc
+++ b/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
       }
diff --git a/packages/create-stylable-app/template/ts-react-webpack-lean/stylable.config.js b/packages/create-stylable-app/template/ts-react-webpack-lean/stylable.config.cjs
similarity index 86%
rename from packages/create-stylable-app/template/ts-react-webpack-lean/stylable.config.js
rename to packages/create-stylable-app/template/ts-react-webpack-lean/stylable.config.cjs
index 0e97839cd..a0dfda6ce 100644
--- a/packages/create-stylable-app/template/ts-react-webpack-lean/stylable.config.js
+++ b/packages/create-stylable-app/template/ts-react-webpack-lean/stylable.config.cjs
@@ -1,4 +1,5 @@
-//@ts-check
+// @ts-check
+
 const { typedConfiguration } = require('@stylable/cli');
 
 exports.stcConfig = typedConfiguration({
@@ -6,6 +7,5 @@ exports.stcConfig = typedConfiguration({
         srcDir: './src',
         outDir: './st-types',
         dts: true,
-        cjs: false,
     },
 });
diff --git a/packages/create-stylable-app/template/ts-react-webpack-lean/template.js b/packages/create-stylable-app/template/ts-react-webpack-lean/template.js
index e62bcf1bc..00116deff 100644
--- a/packages/create-stylable-app/template/ts-react-webpack-lean/template.js
+++ b/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',
diff --git a/packages/create-stylable-app/template/ts-react-webpack-lean/webpack.config.js b/packages/create-stylable-app/template/ts-react-webpack-lean/webpack.config.js
index 1834588d3..6024c6970 100644
--- a/packages/create-stylable-app/template/ts-react-webpack-lean/webpack.config.js
+++ b/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: {
diff --git a/packages/create-stylable-app/template/ts-react-webpack/.eslintrc b/packages/create-stylable-app/template/ts-react-webpack/.eslintrc
index 2cad22f26..2631bde80 100644
--- a/packages/create-stylable-app/template/ts-react-webpack/.eslintrc
+++ b/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"
diff --git a/packages/create-stylable-app/template/ts-react-webpack/.prettierrc b/packages/create-stylable-app/template/ts-react-webpack/.prettierrc
index bfd9bf74c..8b9749492 100644
--- a/packages/create-stylable-app/template/ts-react-webpack/.prettierrc
+++ b/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
       }
diff --git a/packages/create-stylable-app/template/ts-react-webpack/stylable.config.js b/packages/create-stylable-app/template/ts-react-webpack/stylable.config.cjs
similarity index 86%
rename from packages/create-stylable-app/template/ts-react-webpack/stylable.config.js
rename to packages/create-stylable-app/template/ts-react-webpack/stylable.config.cjs
index 0e97839cd..a0dfda6ce 100644
--- a/packages/create-stylable-app/template/ts-react-webpack/stylable.config.js
+++ b/packages/create-stylable-app/template/ts-react-webpack/stylable.config.cjs
@@ -1,4 +1,5 @@
-//@ts-check
+// @ts-check
+
 const { typedConfiguration } = require('@stylable/cli');
 
 exports.stcConfig = typedConfiguration({
@@ -6,6 +7,5 @@ exports.stcConfig = typedConfiguration({
         srcDir: './src',
         outDir: './st-types',
         dts: true,
-        cjs: false,
     },
 });
diff --git a/packages/create-stylable-app/template/ts-react-webpack/template.js b/packages/create-stylable-app/template/ts-react-webpack/template.js
index e62bcf1bc..00116deff 100644
--- a/packages/create-stylable-app/template/ts-react-webpack/template.js
+++ b/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',
diff --git a/packages/create-stylable-app/template/ts-react-webpack/webpack.config.js b/packages/create-stylable-app/template/ts-react-webpack/webpack.config.js
index 1834588d3..6024c6970 100644
--- a/packages/create-stylable-app/template/ts-react-webpack/webpack.config.js
+++ b/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: {