feat: use 4 character version hash (#322)

This will shorten the `productionPrefix` that is used in mui for generating class names

apis/nucleus/src/components/NebulaApp.jsx

@@ -6,7 +6,7 @@ import { createTheme, ThemeProvider, StylesProvider, createGenerateClassName } f
 import InstanceContext from '../contexts/InstanceContext';
 import useAppSelections from '../hooks/useAppSelections';
 
-const THEME_PREFIX = (process.env.NEBULA_VERSION || '').replace(/[.-]/g, '_');
+const NEBULA_VERSION_HASH = process.env.NEBULA_VERSION_HASH || '';
 
 let counter = 0;
 
@@ -14,13 +14,14 @@ const NebulaApp = forwardRef(({ initialContext, app }, ref) => {
   const [appSelections] = useAppSelections(app);
   const [context, setContext] = useState(initialContext);
   const [muiThemeName, setMuiThemeName] = useState();
+
   const { theme, generator } = useMemo(
     () => ({
       theme: createTheme(muiThemeName),
       generator: createGenerateClassName({
-        productionPrefix: `${THEME_PREFIX}-`,
+        productionPrefix: `${NEBULA_VERSION_HASH}`,
         disableGlobal: true,
-        seed: `nebulajs-${counter++}`,
+        seed: `njs-${counter++}`,
       }),
     }),
     [muiThemeName]

commands/serve/lib/webpack.build.js

@@ -10,8 +10,14 @@ const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
 const favicon = path.resolve(__dirname, '../../../docs/assets/njs.png');
 
-// console.log(path.resolve(__dirname, '../../apis/nucleus'));
-// process.exit();
+const crypto = require('crypto');
+const { version } = require('../package.json');
+
+const versionHash = crypto
+  .createHash('md5')
+  .update(version)
+  .digest('hex')
+  .slice(0, 4);
 
 const cfg = ({ srcDir, distDir, dev = false, serveConfig = {} }) => {
   const config = {
@@ -81,6 +87,8 @@ const cfg = ({ srcDir, distDir, dev = false, serveConfig = {} }) => {
     plugins: [
       new webpack.DefinePlugin({
         __NEBULA_DEV__: true,
+        'process.env.NEBULA_VERSION': JSON.stringify(version),
+        'process.env.NEBULA_VERSION_HASH': JSON.stringify(versionHash),
       }),
       new MonacoWebpackPlugin({ languages: ['json'] }),
       new HtmlWebpackPlugin({

rollup.config.js

@@ -6,12 +6,19 @@ const nodeResolve = require('@rollup/plugin-node-resolve');
 const replace = require('@rollup/plugin-replace');
 const { terser } = require('rollup-plugin-terser');
 
+const crypto = require('crypto');
 const localeStringValidator = require('./tools/locale-string-validator');
 
 const cwd = process.cwd();
 const pkg = require(path.join(cwd, 'package.json')); // eslint-disable-line
 const { name, version, license } = pkg;
 
+const versionHash = crypto
+  .createHash('md5')
+  .update(version)
+  .digest('hex')
+  .slice(0, 4);
+
 const targetName = name.split('/')[1];
 const targetDirName = 'dist';
 const targetDir = path.join(cwd, targetDirName);
@@ -127,6 +134,7 @@ const config = (isEsm, dev = false) => {
         __NEBULA_DEV__: dev,
         'process.env.NODE_ENV': JSON.stringify(isEsm ? 'development' : 'production'),
         'process.env.NEBULA_VERSION': JSON.stringify(version),
+        'process.env.NEBULA_VERSION_HASH': JSON.stringify(versionHash),
       }),
       nodeResolve({
         extensions: [dev ? '.dev.js' : false, '.js', '.jsx'].filter(Boolean),