Feature/vite support

.gitignore

@@ -6,5 +6,5 @@ npm-debug.log
 node_modules
 
 # Build Artifacts
-/addon/out
+/addon/dist
 /addon/README.md

.nvmrc

@@ -1 +1 @@
-10
+16

.prettierignore

@@ -1,2 +1,2 @@
 # Build Output
-/addon/out
+/addon/dist

CONTRIBUTING.md

@@ -28,16 +28,16 @@ The library source is found within `addon`; referenced sub-directories or
 commands in this section are relative to that directory.
 
 The source-code for the library can be found within the `src` sub-directory.
-Babel is used to compile the output to the adjacent `out` directory, which is
+Babel is used to compile the output to the adjacent `dist` directory, which is
 _not_ part of version control. This can be done by running
 
 ```
 yarn build
 ```
 
 Additionally, files exist within the root of the library that re-export code
-from the `out` directory. This allows for nice clean imports for users of the
-library without them needing to know about the `out` directory.
+from the `dist` directory. This allows for nice clean imports for users of the
+library without them needing to know about the `dist` directory.
 
 ## Running Example Apps
 

addon/.babelrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  presets: [
+    "@babel/preset-env",
+    "@babel/preset-react",
+  ],
+  "plugins": ["@babel/plugin-proposal-class-properties"],
+  env: {
+    esm: {
+      presets: [
+        [
+          "@babel/preset-env",
+          {
+            modules: false,
+          },
+        ],
+      ],
+    },
+  },
+};

addon/package.json

@@ -2,9 +2,10 @@
   "name": "@whitespace/storybook-addon-html",
   "version": "5.0.0",
   "description": "A Storybook addon that extracts and displays compiled syntax-highlighted HTML",
-  "main": "out/preset.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
   "files": [
-    "out/**/*",
+    "dist/**/*",
     "README.md",
     "*.js"
   ],
@@ -21,9 +22,11 @@
     "url": "https://github.com/whitespace-se/storybook-addon-html.git"
   },
   "scripts": {
-    "build": "yarn clean && babel -d ./out ./src",
-    "build:watch": "babel --watch -d ./out ./src",
-    "clean": "rm -rf ./out",
+    "build": "yarn clean && concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"",
+    "build:watch": "yarn buildBabel:esm -- --watch",
+    "buildBabel:cjs": "babel ./src -d ./dist/cjs --extensions \".js,.jsx\"",
+    "buildBabel:esm": "babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx\"",
+    "clean": "rm -rf ./dist",
     "prepare": "yarn build",
     "prepublishOnly": "cp ../README.md ."
   },
@@ -38,6 +41,7 @@
     "@storybook/addons": "^6.1.21",
     "@storybook/react": "^6.1.21",
     "babel-eslint": "^10.1.0",
+    "concurrently": "^7.0.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },
@@ -51,7 +55,7 @@
     "@babel/parser": "^7.13.12",
     "@storybook/api": "^6.1.21",
     "@storybook/components": "^6.1.21",
-    "prettier": "^2.2.1",
+    "prettier": "~2.5.1",
     "react-syntax-highlighter": "^15.4.3"
   },
   "publishConfig": {

addon/preset.js

@@ -1 +1,16 @@
-module.exports = require('./out/preset');
+function config(entry = [], { addDecorator = true }) {
+  const addonConfig = [];
+  if (addDecorator) {
+    addonConfig.push(require.resolve('./dist/esm/preset/addDecorators'));
+  }
+  return [...entry, ...addonConfig];
+}
+
+function managerEntries(entry = []) {
+  return [...entry, require.resolve("./dist/esm/preset/manager")];
+}
+
+module.exports = {
+  managerEntries,
+  config,
+};

addon/src/register.js → addon/src/preset/manager.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { AddonPanel } from '@storybook/components';
 import { addons, types } from '@storybook/addons';
 
-import Panel from './Panel';
+import Panel from '../Panel';
 
 const ADDON_ID = 'html';
 const PANEL_ID = `${ADDON_ID}/panel`;

examples/vue/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "description": "Example of a Storybook app using @whitespace/storybook-addon-html with Vue",
   "private": true,
-  "license": "AGPL"
+  "license": "AGPL",
   "scripts": {
     "start": "start-storybook -p 6006",
     "build": "build-storybook",

package.json

@@ -13,6 +13,6 @@
   "devDependencies": {
     "eslint": "^7.22.0",
     "eslint-plugin-react": "^7.23.1",
-    "prettier": "^2.2.1"
+    "prettier": "~2.5.1"
   }
 }