RC #251 - Adding Vite build to "semantic-ui", "shared", and "user-def…

…ined-fields" packages; Testing renaming "Object" to "ObjectJs" in "shared" package

.flowconfig

@@ -1,5 +1,7 @@
 [ignore]
 <PROJECT_ROOT>/types/.*
+<PROJECT_ROOT>/build/.*
+<PROJECT_ROOT>/dist/.*
 ./node_modules/
 
 [include]

packages/semantic-ui/package.json

@@ -3,13 +3,19 @@
   "version": "1.2.0-beta.29",
   "description": "A package of shared components based on the Semantic UI Framework.",
   "license": "MIT",
-  "main": "./build/index.js",
-  "style": [
-    "./build/main.css",
-    "./build/semantic-ui.css"
-  ],
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "style": "./dist/style.css",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
   "scripts": {
-    "build": "webpack --mode production && flow-copy-source -v src types"
+    "build": "vite build && flow-copy-source -v src types"
   },
   "dependencies": {
     "@performant-software/shared-components": "^1.2.0-beta.29",
@@ -19,8 +25,6 @@
     "rc-slider": "^10.2.0",
     "react-calendar": "^3.3.0",
     "react-color": "^2.18.1",
-    "react-dnd": "^11.1.3",
-    "react-dnd-html5-backend": "^11.1.3",
     "react-i18next": "^11.4.0",
     "react-pdf": "^7.1.1",
     "react-syntax-highlighter": "^15.5.0",
@@ -34,15 +38,20 @@
   "peerDependencies": {
     "@samvera/clover-iiif": "^2.3.2",
     "react": ">= 16.13.1 < 19.0.0",
+    "react-dnd": "^11.1.3",
+    "react-dnd-html5-backend": "^11.1.3",
     "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",
     "flow-copy-source": "^2.0.9",
     "less": "^4.1.2",
     "less-loader": "^11.0.0",
     "mini-css-extract-plugin": "^2.6.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "vite": "^5.1.4"
   }
-}
+}

packages/semantic-ui/src/components/AccordionList.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { Object as ObjectUtils, Timer } from '@performant-software/shared-components';
+import { ObjectJs as ObjectUtils, Timer } from '@performant-software/shared-components';
 import React, { Component } from 'react';
 import {
   Button,

packages/semantic-ui/src/components/DataList.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { Object as ObjectUtils, Timer } from '@performant-software/shared-components';
+import { ObjectJs as ObjectUtils, Timer } from '@performant-software/shared-components';
 import React, { Component, type ComponentType } from 'react';
 import uuid from 'react-uuid';
 import _ from 'underscore';

packages/semantic-ui/src/components/DataTable.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { Browser, Object as ObjectUtils } from '@performant-software/shared-components';
+import { Browser, ObjectJs as ObjectUtils } from '@performant-software/shared-components';
 import React, { Component, createRef, type Element } from 'react';
 import {
   Checkbox,

packages/semantic-ui/src/components/DataTableColumnSelector.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { Object as ObjectUtils } from '@performant-software/shared-components';
+import { ObjectJs as ObjectUtils } from '@performant-software/shared-components';
 import React, { Component, type ComponentType, type Element } from 'react';
 import { Checkbox, Dropdown, Icon } from 'semantic-ui-react';
 import _ from 'underscore';

packages/semantic-ui/src/components/ListTable.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { Hooks, Object as ObjectUtils } from '@performant-software/shared-components';
+import { Hooks, ObjectJs as ObjectUtils } from '@performant-software/shared-components';
 import React, { useEffect } from 'react';
 import _ from 'underscore';
 import DataTable from './DataTable';

packages/semantic-ui/vite.config.js

@@ -0,0 +1,59 @@
+// @flow
+
+import { flowPlugin, esbuildFlowPlugin } from '@bunchtogether/vite-plugin-flow';
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+import * as packageJson from './package.json';
+
+const root = resolve(__dirname);
+
+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
+      }
+    }
+  },
+  resolve: {
+    alias: {
+      '../../theme.config': resolve(root, '/src/css/theme.config'),
+      '../src/css/site': resolve(root, '/src/css/site'),
+      '../src/css/themes': resolve(root, '/src/css/themes'),
+      '~semantic-ui-less/theme.less': resolve(root, '../../node_modules/semantic-ui-less/theme.less'),
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      less: {
+        math: 'always',
+        relativeUrls: true,
+        javascriptEnabled: true
+      },
+    },
+  }
+}));

packages/shared/package.json

@@ -3,20 +3,27 @@
   "version": "1.2.0-beta.29",
   "description": "A package of shared, framework agnostic, components.",
   "license": "MIT",
-  "main": "./build/index.js",
-  "style": "./build/main.css",
+  "type": "module",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "style": "./dist/style.css",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
   "scripts": {
-    "build": "webpack --mode production && flow-copy-source -v src types"
+    "build": "vite build && flow-copy-source -v src types"
   },
   "dependencies": {
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "citeproc": "^2.4.62",
     "i18next": "^19.4.4",
-    "moment": "^2.30.1",
+    "moment": "2.18.1",
     "moment-islamic-civil": "ACGC/moment-islamic-civil",
-    "react-dnd": "^11.1.3",
-    "react-dnd-html5-backend": "^11.1.3",
     "react-fast-compare": "^3.2.0",
     "react-ga4": "^1.4.1",
     "react-i18next": "^11.4.0",
@@ -28,11 +35,19 @@
   },
   "peerDependencies": {
     "react": ">= 16.13.1 < 19.0.0",
+    "react-dnd": "^11.1.3",
+    "react-dnd-html5-backend": "^11.1.3",
     "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"
+  },
+  "resolutions": {
+    "moment": "2.18.1"
   }
-}
+}

packages/shared/src/index.js

@@ -35,7 +35,7 @@ export { default as Form } from './utils/Form';
 export { default as Hooks } from './utils/Hooks';
 export { default as IIIF } from './utils/IIIF';
 export { default as Map } from './utils/Map';
-export { default as Object } from './utils/Object';
+export { default as ObjectJs } from './utils/Object';
 export { default as String } from './utils/String';
 export { default as Timer } from './utils/Timer';
 

packages/shared/vite.config.js

@@ -0,0 +1,49 @@
+// @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
+      }
+    }
+  },
+  resolve: {
+    preserveSymlinks: true,
+    mainFields: [
+      'browser',
+      'module',
+      'main',
+      'jsnext:main',
+      'jsnext'
+    ]
+  }
+}));

packages/storybook/.storybook/preview.js

@@ -7,9 +7,8 @@ import '@peripleo/maplibre/peripleo-maplibre.css';
 import '@peripleo/peripleo/default-theme';
 import '../../core-data/dist/style.css';
 import '../../geospatial/dist/style.css';
-import '../../semantic-ui/build/main.css';
-import '../../semantic-ui/build/semantic-ui.css';
-import '../../shared/build/main.css';
+import '../../semantic-ui/dist/style.css';
+import '../../shared/dist/style.css';
 
 /**
  * If a list of accessibility tags are provided, only run the tests for those specific tags.

packages/storybook/package.json

@@ -37,15 +37,20 @@
     "dotenv": "^16.0.3",
     "http-proxy-middleware": "^2.0.6",
     "i18next": "^22.0.1",
-    "moment": "^2.29.2",
+    "moment": "^2.18.1",
     "react": "^18.2.0",
     "react-calendar": "^3.7.0",
     "react-docgen": "^6.0.1",
+    "react-dnd": "^11.1.3",
+    "react-dnd-html5-backend": "^11.1.3",
     "react-dom": "^18.2.0",
     "semantic-ui-react": "^2.1.2",
     "simple-keyboard-layouts": "^3.1.87",
     "storybook": "^7.0.26",
     "underscore": "^1.13.2",
     "vite": "^5.1.4"
+  },
+  "resolutions": {
+    "moment": "2.18.1"
   }
 }