feat(root): Fix JS build and introduce playground applications (novuh…

…q#5988)

.cspell.json

@@ -656,7 +656,9 @@
     "textareas",
     "frameworkterminal",
     "unarchived",
-    "Unarchived"
+    "Unarchived",
+    "grayscale",
+    "directcss"
   ],
   "flagWords": [],
   "patterns": [
@@ -751,6 +753,7 @@
     ".env.test",
     ".example.env",
     "pnpm-lock.yaml",
-    "apps/web/env.sh"
+    "apps/web/env.sh",
+    "packages/js/src/ui/index.directcss",
   ]
 }

.eslintignore

@@ -10,3 +10,5 @@ node_modules
 
 # OSX
 .DS_Store
+
+playground/

novu.code-workspace

@@ -92,6 +92,14 @@
       "name": "📦 @novu/application-generic",
       "path": "packages/application-generic"
     },
+    {
+      "name": "📦 @novu/js",
+      "path": "packages/js"
+    },
+    {
+      "name": "🎮 @novu/nextjs-playground",
+      "path": "playground/nextjs"
+    }
   ],
   "settings": {
     "typescript.tsdk": "node_modules/typescript/lib",

package.json

@@ -175,7 +175,8 @@
       "packages/*",
       "enterprise/packages/*",
       "enterprise/packages/*/*",
-      "packages/notification-center-angular/projects/*"
+      "packages/notification-center-angular/projects/*",
+      "playground/*"
     ]
   },
   "husky": {

packages/js/package.cjs.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

packages/js/package.esm.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

packages/js/package.json

@@ -16,12 +16,11 @@
       "default": "./dist/esm/index.mjs"
     },
     "./ui": {
-      "types": "./dist/ui/index.d.ts",
-      "require": "./dist/ui/index.js",
-      "import": "./dist/ui/index.mjs",
-      "default": "./dist/ui/index.mjs"
-    },
-    "./ui/index.css": "./dist/ui/index.css"
+      "types": "./dist/types/ui/index.d.ts",
+      "require": "./dist/cjs/ui/index.cjs",
+      "import": "./dist/esm/ui/index.mjs",
+      "default": "./dist/esm/ui/index.mjs"
+    }
   },
   "files": [
     "dist/cjs",
@@ -33,7 +32,7 @@
   "private": true,
   "scripts": {
     "start": "pnpm run build -- --watch --sourcemap",
-    "build": "tsup && pnpm run build:umd && pnpm run post:build",
+    "build": "tsup && pnpm run post:build",
     "build:umd": "webpack --config webpack.config.cjs",
     "build:watch": "tsup --watch",
     "post:build": "node scripts/size-limit.mjs",
@@ -60,9 +59,12 @@
     "chalk": "^5.3.0",
     "compression-webpack-plugin": "^10.0.0",
     "esbuild-plugin-compress": "^1.0.1",
+    "esbuild-plugin-inline-import": "^1.0.4",
+    "esbuild-plugin-solid": "^0.6.0",
     "eslint-plugin-local-rules": "^3.0.2",
     "jest": "^29.3.1",
     "postcss": "^8.4.38",
+    "postcss-load-config": "^6.0.1",
     "postcss-prefix-selector": "^1.16.1",
     "postcss-preset-env": "^9.5.14",
     "solid-devtools": "^0.29.2",
@@ -71,7 +73,7 @@
     "tiny-glob": "^0.2.9",
     "ts-jest": "^29.0.3",
     "ts-loader": "~9.4.0",
-    "tsup": "^8.0.2",
+    "tsup": "^8.1.0",
     "tsup-preset-solid": "^2.2.0",
     "typescript": "4.9.5",
     "webpack": "^5.74.0",

packages/js/scripts/size-limit.mjs

@@ -15,12 +15,12 @@ const modules = [
   {
     name: 'UMD minified',
     filePath: umdPath,
-    limitInBytes: 70_000,
+    limitInBytes: 140_000,
   },
   {
     name: 'UMD gzip',
     filePath: umdGzipPath,
-    limitInBytes: 20_000,
+    limitInBytes: 50_000,
   },
 ];
 

packages/js/src/ui/components/Renderer.tsx

@@ -1,3 +1,4 @@
+import { onCleanup, onMount } from 'solid-js';
 import { MountableElement, Portal } from 'solid-js/web';
 import { NovuUI } from '..';
 import { NovuOptions } from '../../novu';
@@ -31,13 +32,32 @@ export type NovuComponentControls = {
 
 type RendererProps = {
   novuUI: NovuUI;
+  defaultCss: string;
   appearance?: Appearance;
   nodes: Map<MountableElement, NovuComponent>;
   localization?: Localization;
   options: NovuOptions;
 };
 
 export const Renderer = (props: RendererProps) => {
+  onMount(() => {
+    const id = 'novu-default-css';
+    const el = document.getElementById(id);
+    if (el) {
+      return;
+    }
+
+    const styleEl = document.createElement('style');
+    styleEl.id = id;
+    document.head.appendChild(styleEl);
+    styleEl.innerHTML = props.defaultCss;
+
+    onCleanup(() => {
+      const element = document.getElementById(id);
+      element?.remove();
+    });
+  });
+
   return (
     <NovuProvider options={props.options}>
       <LocalizationProvider localization={props.localization}>

packages/js/src/ui/context/AppearanceContext.tsx

@@ -90,7 +90,6 @@ export const AppearanceProvider = (props: AppearanceProviderProps) => {
     Array.isArray(props.appearance?.baseTheme) ? props.appearance?.baseTheme || [] : [props.appearance?.baseTheme || {}]
   );
 
-  //place style element on HEAD. Placing in body is available for HTML 5.2 onward.
   onMount(() => {
     const el = document.getElementById(props.id);
     if (el) {
@@ -104,13 +103,13 @@ export const AppearanceProvider = (props: AppearanceProviderProps) => {
     document.head.appendChild(styleEl);
 
     setStyleElement(styleEl);
-  });
 
-  onCleanup(() => {
-    const el = document.getElementById(props.id);
-    if (el) {
-      el.remove();
-    }
+    onCleanup(() => {
+      const element = document.getElementById(props.id);
+      if (element) {
+        element.remove();
+      }
+    });
   });
 
   //handle variables

packages/js/src/ui/index.ts

@@ -0,0 +1 @@
+export { NovuUI } from './novuUI';

packages/js/src/ui/index.tsx → packages/js/src/ui/novuUI.tsx

@@ -1,12 +1,13 @@
 import { MountableElement, render } from 'solid-js/web';
 import type { NovuOptions } from '../novu';
 import { Appearance } from './context';
-import './index.css';
 import { generateRandomString } from './helpers';
 import { Localization } from './context/LocalizationContext';
-import { NovuComponent, NovuComponentControls, NovuComponentName, Renderer } from './components/Renderer';
+import { NovuComponent, NovuComponentName, Renderer } from './components/Renderer';
 import { NovuProviderProps } from './types';
 import { createSignal } from 'solid-js';
+//@ts-expect-error inline import esbuild syntax
+import css from 'directcss:./index.directcss';
 
 export class NovuUI {
   #dispose: { (): void } | null = null;
@@ -51,6 +52,7 @@ export class NovuUI {
     const dispose = render(
       () => (
         <Renderer
+          defaultCss={css}
           novuUI={this}
           nodes={this.#mountedElements()}
           options={this.#options()}

packages/js/src/umd.ts

@@ -1,5 +1,4 @@
 import { Novu } from './novu';
-import { NovuUI } from './ui';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore

packages/js/tsup.config.ts

@@ -1,16 +1,42 @@
 import { defineConfig, Options } from 'tsup';
-// import { compress } from 'esbuild-plugin-compress';
-import glob from 'tiny-glob';
-import { parsePresetOptions, generateTsupOptions, type PresetOptions } from 'tsup-preset-solid';
+import { solidPlugin } from 'esbuild-plugin-solid';
 import { name, version } from './package.json';
+import inlineImportPlugin from 'esbuild-plugin-inline-import';
+import loadPostcssConfig from 'postcss-load-config';
+import { compress } from 'esbuild-plugin-compress';
+import postcss from 'postcss';
+
+const processCSS = async (css: string, filePath: string) => {
+  const { plugins, options } = await loadPostcssConfig({}, filePath);
+  const result = await postcss(plugins).process(css, { ...options, from: filePath });
+  return result.css;
+};
+
+const runAfterLast =
+  (commands: Array<string | false>) =>
+  (...configs: Options[]) => {
+    const [last, ...rest] = configs.reverse();
+    return [...rest.reverse(), { ...last, onSuccess: [last.onSuccess, ...commands].filter(Boolean).join(' && ') }];
+  };
 
 const isProd = process.env?.NODE_ENV === 'production';
 
 const baseConfig: Options = {
-  splitting: false,
+  splitting: true,
   sourcemap: false,
   clean: true,
   dts: true,
+  esbuildPlugins: [
+    //@ts-expect-error types
+    inlineImportPlugin({
+      filter: /^directcss:/,
+      transform: async (contents, args) => {
+        const processedCss = processCSS(contents, args.path);
+        return processedCss;
+      },
+    }),
+    solidPlugin(),
+  ],
   define: { PACKAGE_NAME: `"${name}"`, PACKAGE_VERSION: `"${version}"`, __DEV__: `${!isProd}` },
 };
 
@@ -19,66 +45,54 @@ const baseModuleConfig: Options = {
   treeshake: true,
   dts: false,
   define: { PACKAGE_NAME: `"${name}"`, PACKAGE_VERSION: `"${version}"`, __DEV__: `${!isProd}` },
-  entry: await glob('./src/**/!(*.d|*.test).ts'),
+  entry: {
+    index: './src/index.ts',
+    'ui/index': './src/ui/index.ts',
+  },
   outExtension: ({ format }) => {
     return {
       js: format === 'cjs' ? '.cjs' : '.mjs',
     };
   },
 };
 
-const uiPresetOptions: PresetOptions = {
-  entries: [
-    {
-      // entries with '.tsx' extension will have `solid` export condition generated
-      entry: 'src/ui/index.tsx',
-    },
-  ],
-  out_dir: 'dist/ui',
-  // Set to `true` to remove all `console.*` calls and `debugger` statements in prod builds
-  drop_console: true,
-  // Set to `true` to generate a CommonJS build alongside ESM
-  cjs: true,
-};
-
 export default defineConfig((config: Options) => {
-  const isWatching = !!config.watch;
+  const copyPackageJson = (format: 'esm' | 'cjs') => `cp ./package.${format}.json ./dist/${format}/package.json`;
 
-  const PARSED_DATA = parsePresetOptions(uiPresetOptions, isWatching);
+  const cjs: Options = {
+    ...baseModuleConfig,
+    format: 'esm',
+    outDir: 'dist/esm',
+    tsconfig: 'tsconfig.json',
+  };
 
-  return [
-    {
-      ...baseModuleConfig,
-      format: 'esm',
-      outDir: 'dist/esm',
-      tsconfig: 'tsconfig.json',
-    },
-    {
-      ...baseModuleConfig,
-      format: 'cjs',
-      outDir: 'dist/cjs',
-      tsconfig: 'tsconfig.cjs.json',
+  const esm: Options = {
+    ...baseModuleConfig,
+    format: 'cjs',
+    outDir: 'dist/cjs',
+    tsconfig: 'tsconfig.cjs.json',
+  };
+
+  const umd: Options = {
+    ...baseConfig,
+    entry: { novu: 'src/umd.ts' },
+    format: ['iife'],
+    minify: true,
+    dts: false,
+    outExtension: () => {
+      return {
+        js: '.min.js',
+      };
     },
-    ...generateTsupOptions(PARSED_DATA),
-    // {
-    //   ...baseConfig,
-    //   entry: { novu: 'src/umd.ts' },
-    //   format: ['iife'],
-    //   minify: true,
-    //   dts: false,
-    //   outExtension: () => {
-    //     return {
-    //       js: '.min.js',
-    //     };
-    //   },
-    //   esbuildPlugins: [
-    //     compress({
-    //       gzip: true,
-    //       brotli: false,
-    //       outputDir: '.',
-    //       exclude: ['**/*.map'],
-    //     }),
-    //   ],
-    // },
-  ];
+    esbuildPlugins: [
+      ...(baseConfig.esbuildPlugins ? baseConfig.esbuildPlugins : []),
+      compress({
+        gzip: true,
+        brotli: false,
+        outputDir: '.',
+        exclude: ['**/*.map'],
+      }),
+    ],
+  };
+  return runAfterLast([copyPackageJson('esm'), copyPackageJson('cjs')])(umd, esm, cjs);
 });

playground/nextjs/.eslintignore

@@ -0,0 +1 @@
+/