RC #251 - Committing Vite changes

.gitignore

@@ -1,4 +1,5 @@
 build/
+dist/
 node_modules/
 .env
 .vscode/launch.json

packages/controlled-vocabulary/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/controlled-vocabulary",
-  "version": "1.2.0-beta.26",
+  "version": "1.2.0-beta.27",
   "description": "A package of components to allow user to configure dropdown elements. Use with the \"controlled_vocabulary\" gem.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -12,8 +12,8 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/semantic-components": "^1.2.0-beta.26",
-    "@performant-software/shared-components": "^1.2.0-beta.26",
+    "@performant-software/semantic-components": "^1.2.0-beta.27",
+    "@performant-software/shared-components": "^1.2.0-beta.27",
     "i18next": "^21.9.2",
     "semantic-ui-react": "^2.1.2",
     "underscore": "^1.13.2"

packages/core-data/package.json

@@ -1,26 +1,25 @@
 {
   "name": "@performant-software/core-data",
-  "version": "1.2.0-beta.26",
+  "version": "1.2.0-beta.27",
   "description": "A package of components used for Core Data",
   "license": "MIT",
-  "main": "./build/cjs/index.js",
-  "module": "./build/es/index.js",
-  "style": "./build/cjs/main.css",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "style": "./dist/style.css",
+  "type": "module",
   "exports": {
     ".": {
-      "import": "./build/es/index.js",
-      "require": "./build/cjs/index.js"
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
     },
-    "./build/main.css": {
-      "import": "./build/es/main.css",
-      "require": "./build/cjs/main.css"
-    }
+    "./style.css": "./dist/style.css"
   },
   "scripts": {
+    "build-vite": "vite build && flow-copy-source -v src types",
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/geospatial": "^1.2.0-beta.26",
+    "@performant-software/geospatial": "^1.2.0-beta.27",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dialog": "^1.0.5",
     "@samvera/clover-iiif": "^2.3.2",
@@ -37,13 +36,16 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@bunchtogether/vite-plugin-flow": "^1.0.2",
     "@performant-software/webpack-config": "^1.0.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.17",
     "mini-css-extract-plugin": "^2.8.0",
     "postcss": "^8.4.34",
     "postcss-loader": "^8.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.1",
+    "vite": "^5.1.4"
   }
-}
+}

packages/core-data/postcss.config.js

@@ -1,4 +1,6 @@
-module.exports = {
+// @flow
+
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {}

packages/core-data/vite.config.js

@@ -0,0 +1,39 @@
+// @flow
+
+import { flowPlugin, esbuildFlowPlugin } from '@bunchtogether/vite-plugin-flow';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import * as packageJson from './package.json';
+
+export default defineConfig(() => ({
+  esbuild: {
+    include: /\.js$/,
+    exclude: [],
+    loader: 'jsx',
+  },
+  optimizeDeps: {
+    esbuildOptions: {
+      plugins: [esbuildFlowPlugin()]
+    }
+  },
+  plugins: [
+    react(),
+    flowPlugin()
+  ],
+  build: {
+    sourcemap: true,
+    lib: {
+      entry: './src/index.js',
+      formats: ['es', 'cjs'],
+      fileName: (format) => `index.${format}.js`
+    },
+    rollupOptions: {
+      external: [
+        ...Object.keys(packageJson.peerDependencies)
+      ],
+      output: {
+        preserveModules: true
+      }
+    }
+  }
+}));

packages/geospatial/package.json

@@ -1,22 +1,21 @@
 {
   "name": "@performant-software/geospatial",
-  "version": "1.2.0-beta.26",
+  "version": "1.2.0-beta.27",
   "description": "TODO: ADD",
   "license": "MIT",
-  "main": "./build/cjs/index.js",
-  "module": "./build/es/index.js",
-  "style": "./build/main.css",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "style": "./dist/style.css",
+  "type": "module",
   "exports": {
     ".": {
-      "import": "./build/es/index.js",
-      "require": "./build/cjs/index.js"
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
     },
-    "./build/main.css": {
-      "import": "./build/es/main.css",
-      "require": "./build/cjs/main.css"
-    }
+    "./style.css": "./dist/style.css"
   },
   "scripts": {
+    "build-vite": "vite build && flow-copy-source -v src types",
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
@@ -34,8 +33,12 @@
     "react-dom": ">= 16.13.1 < 19.0.0"
   },
   "devDependencies": {
+    "@bunchtogether/vite-plugin-flow": "^1.0.2",
     "@performant-software/webpack-config": "^1.0.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "vite": "^5.1.4",
+    "webpack-node-externals": "^3.0.0"
   }
-}
+}

packages/geospatial/vite.config.js

@@ -0,0 +1,39 @@
+// @flow
+
+import { flowPlugin, esbuildFlowPlugin } from '@bunchtogether/vite-plugin-flow';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import * as packageJson from './package.json';
+
+export default defineConfig(() => ({
+  esbuild: {
+    include: /\.js$/,
+    exclude: [],
+    loader: 'jsx',
+  },
+  optimizeDeps: {
+    esbuildOptions: {
+      plugins: [esbuildFlowPlugin()]
+    }
+  },
+  plugins: [
+    react(),
+    flowPlugin()
+  ],
+  build: {
+    sourcemap: true,
+    lib: {
+      entry: './src/index.js',
+      formats: ['es', 'cjs'],
+      fileName: (format) => `index.${format}.js`
+    },
+    rollupOptions: {
+      external: [
+        ...Object.keys(packageJson.peerDependencies)
+      ],
+      output: {
+        preserveModules: true
+      }
+    }
+  }
+}));

packages/geospatial/webpack.config.js → packages/geospatial/webpack.config.jshold

@@ -1,10 +1,26 @@
-const { configure } = require('@performant-software/webpack-config');
-const path = require('path');
+import webpack from '@performant-software/webpack-config';
+import path from 'path';
+import * as url from 'url';
+import nodeExternals from 'webpack-node-externals';
+
+const { configure } = webpack;
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+
+// const { configure } = require('@performant-software/webpack-config');
+// const path = require('path');
 
 // Common config
 const config = {
   externals: [
-    '@peripleo/maplibre'
+    '@peripleo/maplibre',
+    'react',
+    'react-dom',
+    nodeExternals({
+      additionalModuleDirs: [
+        path.resolve(__dirname, '../../node_modules')
+      ],
+      importType: 'module'
+    })
   ],
   resolve: {
     alias: {
@@ -26,7 +42,9 @@ const cjs = configure(__dirname, {
   output: {
     filename: 'index.js',
     path: path.resolve(__dirname, 'build/cjs'),
-    libraryTarget: 'commonjs2'
+    library: {
+      type: 'commonjs2'
+    }
   },
 });
 
@@ -39,11 +57,18 @@ const es = configure(__dirname, {
   output: {
     filename: 'index.js',
     path: path.resolve(__dirname, 'build/es'),
-    libraryTarget: 'module'
+    library: {
+      type: 'module'
+    },
+    chunkFormat: 'module',
   },
 });
 
-module.exports = [
-  es,
-  cjs
-];
+const ex = [es, cjs];
+
+export default ex;
+
+// module.exports = [
+//   es,
+//   cjs
+// ];

packages/semantic-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "1.2.0-beta.26",
+  "version": "1.2.0-beta.27",
   "description": "A package of shared components based on the Semantic UI Framework.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -12,7 +12,7 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/shared-components": "^1.2.0-beta.26",
+    "@performant-software/shared-components": "^1.2.0-beta.27",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "i18next": "^19.4.4",

packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/shared-components",
-  "version": "1.2.0-beta.26",
+  "version": "1.2.0-beta.27",
   "description": "A package of shared, framework agnostic, components.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -13,7 +13,7 @@
     "axios": "^0.26.1",
     "citeproc": "^2.4.62",
     "i18next": "^19.4.4",
-    "moment": "^2.27.0",
+    "moment": "^2.30.1",
     "moment-islamic-civil": "ACGC/moment-islamic-civil",
     "react-dnd": "^11.1.3",
     "react-dnd-html5-backend": "^11.1.3",

packages/shared/src/utils/Calendar.js

@@ -177,6 +177,7 @@ class Calendar {
   moment(date: ?any = null) {
     const m = date ? moment(date) : moment();
     m.locale(this.locale);
+    console.log(m);
     return m;
   }
 

packages/storybook/.storybook/main.js

@@ -4,16 +4,24 @@ import path from 'path';
 import _ from 'underscore';
 
 const config = {
-  stories: ['../src/**/*.stories.(js|mdx)'],
+  stories: ['../src/**/*.stories.js'],
   addons: [
     '@storybook/addon-a11y',
     '@storybook/addon-actions',
     '@storybook/addon-docs',
     '@storybook/addon-knobs',
     '@storybook/addon-links'
   ],
+  core: {
+    builder: {
+      name: '@storybook/builder-vite',
+      options: {
+        viteConfigPath: './vite.config.js',
+      },
+    }
+  },
   framework: {
-    name: '@storybook/react-webpack5',
+    name: '@storybook/react-vite',
     options: {}
   },
   babel: (options) => {

packages/storybook/.storybook/preview.js

@@ -5,7 +5,8 @@ import React, { useRef } from 'react';
 import ModalContext from '../../semantic-ui/src/context/ModalContext';
 import '@peripleo/maplibre/peripleo-maplibre.css';
 import '@peripleo/peripleo/default-theme';
-import '../../core-data/build/cjs/main.css';
+import '../../core-data/dist/style.css';
+import '../../geospatial/dist/style.css';
 import '../../semantic-ui/build/semantic-ui.css';
 
 /**
@@ -15,12 +16,12 @@ import '../../semantic-ui/build/semantic-ui.css';
  */
 let a11y;
 
-if (process.env.A11Y_TAGS) {
+if (import.meta.env.A11Y_TAGS) {
   a11y = {
     config: {
       runOnly: {
         type: 'tag',
-        values: process.env.A11Y_TAGS.split(',')
+        values: import.meta.env.A11Y_TAGS.split(',')
       }
     }
   }