Merge pull request #37 from janniks/sfc-reinstall

Update from vue sfc rollup

Author: janniks

babel.config.js

@@ -1,5 +1,16 @@
-const devPresets = ['@vue/babel-preset-app'];
-const buildPresets = ['@babel/preset-env'];
+const devPresets = ["@vue/babel-preset-app"];
+const buildPresets = [
+  [
+    "@babel/preset-env",
+    // Config for @babel/preset-env
+    {
+      // Example: Always transpile optional chaining/nullish coalescing
+      // include: [
+      //   /(optional-chaining|nullish-coalescing)/
+      // ],
+    },
+  ],
+];
 module.exports = {
-  presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
+  presets: process.env.NODE_ENV === "development" ? devPresets : buildPresets,
 };

build/postcss.js

@@ -4,11 +4,10 @@ import path from "path";
 import vue from "rollup-plugin-vue";
 import alias from "@rollup/plugin-alias";
 import commonjs from "@rollup/plugin-commonjs";
+import resolve from "@rollup/plugin-node-resolve";
 import replace from "@rollup/plugin-replace";
-import babel from "rollup-plugin-babel";
-import postcss from "rollup-plugin-postcss";
+import babel from "@rollup/plugin-babel";
 import { terser } from "rollup-plugin-terser";
-import postcssLogical from "postcss-logical";
 import minimist from "minimist";
 
 // Get browserslist config and remove ie from es build targets
@@ -18,6 +17,11 @@ const esbrowserslist = fs
   .split("\n")
   .filter((entry) => entry && entry.substring(0, 2) !== "ie");
 
+// Extract babel preset-env config, to combine with esbrowserslist
+const babelPresetEnvConfig = require("../babel.config").presets.filter(
+  (entry) => entry[0] === "@babel/preset-env"
+)[0][1];
+
 const argv = minimist(process.argv.slice(2));
 
 const projectRoot = path.resolve(__dirname, "..");
@@ -27,25 +31,33 @@ const baseConfig = {
   plugins: {
     preVue: [
       alias({
-        resolve: [".js", ".jsx", ".ts", ".tsx", ".vue"],
-        entries: {
-          "@": path.resolve(projectRoot, "src"),
-        },
+        entries: [
+          {
+            find: "@",
+            replacement: `${path.resolve(projectRoot, "src")}`,
+          },
+        ],
       }),
     ],
     replace: {
       "process.env.NODE_ENV": JSON.stringify("production"),
-      "process.env.ES_BUILD": JSON.stringify("false"),
     },
     vue: {
       css: true,
       template: {
         isProduction: true,
       },
     },
+    postVue: [
+      resolve({
+        extensions: [".js", ".jsx", ".ts", ".tsx", ".vue"],
+      }),
+      commonjs(),
+    ],
     babel: {
       exclude: "node_modules/**",
       extensions: [".js", ".jsx", ".ts", ".tsx", ".vue"],
+      babelHelpers: "bundled",
     },
   },
 };
@@ -71,31 +83,30 @@ const buildFormats = [];
 if (!argv.format || argv.format === "es") {
   const esConfig = {
     ...baseConfig,
+    input: "src/entry.esm.js",
     external,
     output: {
-      file: "dist/esm.js",
-      format: "es",
+      file: "dist/esm.js", // custom
+      format: "esm",
       exports: "named",
     },
     plugins: [
-      replace({
-        ...baseConfig.plugins.replace,
-        "process.env.ES_BUILD": JSON.stringify("true"),
-      }),
+      replace(baseConfig.plugins.replace),
       ...baseConfig.plugins.preVue,
       vue(baseConfig.plugins.vue),
+      ...baseConfig.plugins.postVue,
       babel({
         ...baseConfig.plugins.babel,
         presets: [
           [
             "@babel/preset-env",
             {
+              ...babelPresetEnvConfig,
               targets: esbrowserslist,
             },
           ],
         ],
       }),
-      commonjs(),
     ],
   };
   buildFormats.push(esConfig);
@@ -107,10 +118,10 @@ if (!argv.format || argv.format === "cjs") {
     external,
     output: {
       compact: true,
-      file: "dist/ssr.js",
+      file: "dist/ssr.js", // custom
       format: "cjs",
       name: "VueNotion",
-      exports: "named",
+      exports: "auto",
       globals,
     },
     plugins: [
@@ -123,8 +134,8 @@ if (!argv.format || argv.format === "cjs") {
           optimizeSSR: true,
         },
       }),
+      ...baseConfig.plugins.postVue,
       babel(baseConfig.plugins.babel),
-      commonjs(),
     ],
   };
   buildFormats.push(umdConfig);
@@ -136,18 +147,18 @@ if (!argv.format || argv.format === "iife") {
     external,
     output: {
       compact: true,
-      file: "dist/min.js",
+      file: "dist/min.js", // custom
       format: "iife",
       name: "VueNotion",
-      exports: "named",
+      exports: "auto",
       globals,
     },
     plugins: [
       replace(baseConfig.plugins.replace),
       ...baseConfig.plugins.preVue,
       vue(baseConfig.plugins.vue),
+      ...baseConfig.plugins.postVue,
       babel(baseConfig.plugins.babel),
-      commonjs(),
       terser({
         output: {
           ecma: 5,
@@ -158,28 +169,5 @@ if (!argv.format || argv.format === "iife") {
   buildFormats.push(unpkgConfig);
 }
 
-if (!argv.format || argv.format === "postcss") {
-  const postCssConfig = {
-    input: "build/postcss.js",
-    output: {
-      format: "es",
-      file: "dist/styles.ignore",
-    },
-    plugins: [
-      postcss({
-        extract: true,
-        minimize: true,
-        plugins: [postcssLogical()],
-      }),
-    ],
-  };
-  buildFormats.push(postCssConfig);
-}
-
 // Export config
-export default (commandLineArgs) => {
-  // Exporting a method enables command line args override
-  // https://rollupjs.org/guide/en/#configuration-files
-  delete commandLineArgs.format;
-  return buildFormats;
-};
+export default buildFormats;

build/rollup.config.js

@@ -1,8 +1,8 @@
-import Vue from 'vue';
-import Dev from './serve.vue';
+import Vue from "vue";
+import Dev from "./serve.vue";
 
 Vue.config.productionTip = false;
 
 new Vue({
   render: (h) => h(Dev),
-}).$mount('#app');
+}).$mount("#app");

dev/serve.js

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { NotionRenderer, getPageBlocks } from "@/entry";
+import { NotionRenderer, getPageBlocks } from "@/entry.esm";
 
 import "prismjs";
 import "prismjs/themes/prism.css";