upgrade stencil + react-output-target

.vscode/settings.json

@@ -96,5 +96,8 @@
   },
   "[typescriptreact]": {
     "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

apps/demo-react/src/App.tsx

@@ -1,7 +1,7 @@
 import { OramaChatBox, OramaSearchBox, OramaSearchButton } from '@orama/react-components'
 import './App.css'
 
-import { BrowserRouter, Routes, Route, NavLink, useNavigate } from 'react-router'
+import { BrowserRouter, Routes, Route, NavLink } from 'react-router'
 
 const API_KEY = 'LerNlbp6379jVKaPs4wt2nZT4MJZbU1J'
 const ENDPOINT = 'https://cloud.orama.run/v1/indexes/docs-orama-b3f5xd'
@@ -85,7 +85,6 @@ const ChatBoxPage = () => {
 }
 
 const SearchBoxPage = () => {
-  const navigate = useNavigate()
   return (
     <>
       <main>
@@ -96,6 +95,9 @@ const SearchBoxPage = () => {
             onModalClosed={() => {
               console.log('closed')
             }}
+            onModalStatusChanged={(e) => {
+              console.log('Status changed to: ', e.detail.open)
+            }}
             colorScheme="system"
             index={{
               api_key: API_KEY,
@@ -105,8 +107,7 @@ const SearchBoxPage = () => {
             onSearchCompleted={(e: Event) => console.log(e)}
             onSearchResultClick={(e) => {
               e.preventDefault()
-              alert('Moving back to home page')
-              navigate('/')
+              alert('Element clicked')
             }}
             onAnswerGenerated={(e: Event) => console.log(e)}
             onAnswerSourceClick={(e: Event) => {

apps/demo-react/src/index.css

@@ -41,8 +41,18 @@ body {
 body {
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    Fira Sans,
+    Droid Sans,
+    Helvetica Neue,
+    sans-serif;
 }
 
 /*

apps/storybook/stories/internal/orama-chat-assistent-message.stories.tsx

@@ -167,10 +167,11 @@ export const ChatAssistentMessageWithFakeRendering: StoryWithFakeRendering = {
     let count = 0
 
     const intervalId = setInterval(() => {
-      if (count >= MARKDOWN_MESSAGE.length) {
+      if (count >= MARKDOWN_MESSAGE.length || !fakeStreamingMessage) {
         clearInterval(intervalId)
         // biome-ignore lint/suspicious/noExplicitAny: Enum giving error
         interaction.status = 'done' as any
+        return
       }
 
       interaction.response = fakeStreamingMessage.substring(0, count)

apps/storybook/tsconfig.json

@@ -20,5 +20,5 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
+  "include": ["stories"]
 }

package.json

@@ -8,7 +8,8 @@
     "clean": "turbo run clean",
     "dev": "turbo run dev --filter=@orama/wc-components --filter=storybook",
     "dev:demo": "turbo run dev --filter=demo-react --filter=demo-vue --filter=demo-angular",
-    "dev:demo:react": "turbo watch demo-react#dev",
+    "dev:demo:react": "turbo watch dev --filter=demo-react",
+    "dev:demo:nextjs": "turbo watch dev --filter=demo-nextjs",
     "dev:all": "turbo run dev",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "biome": "biome check . ",

packages/ui-stencil-react/package.json

@@ -12,12 +12,13 @@
   ],
   "scripts": {
     "build": "tsup",
-    "build:watch": "tsup --watch",
+    "dev": "tsup --watch",
     "clean": "rm -rf node_modules .turbo",
     "test": "node ./__tests__/react-library.test.js"
   },
   "dependencies": {
-    "@orama/wc-components": "workspace:*"
+    "@orama/wc-components": "workspace:*",
+    "@stencil/react-output-target": "^0.8.2"
   },
   "devDependencies": {
     "@types/node": "^20",

packages/ui-stencil-react/src/index.ts

@@ -1,4 +1,4 @@
-export * from "./components/stencil-generated";
-export { defineCustomElements } from "@orama/wc-components/loader";
+export * from './components/stencil-generated/components'
+export { defineCustomElements } from '@orama/wc-components/loader'
 
-import "@orama/wc-components/dist/orama-ui/orama-ui.css";
+import '@orama/wc-components/dist/orama-ui/orama-ui.css'

packages/ui-stencil-react/tsconfig.json

@@ -1,14 +1,17 @@
 {
   "compilerOptions": {
+    "outDir": "./dist",
     "noImplicitAny": false,
     "removeComments": true,
     "noLib": false,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "sourceMap": true,
-    "lib": ["dom", "es2015"],
-    "moduleResolution": "node",
-    "target": "es5",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "moduleResolution": "bundler",
+    "module": "ESNext",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
     "skipLibCheck": true,
     "jsx": "react",
     "allowSyntheticDefaultImports": true,

packages/ui-stencil-vue/lib/components.ts

@@ -125,7 +125,8 @@ export const OramaInput = /*@__PURE__*/ defineContainer<JSX.OramaInput>('orama-i
   'labelForScreenReaders',
   'defaultValue',
   'autoFocus',
-  'resetValue'
+  'value',
+  'inputChanged'
 ]);
 
 
@@ -144,11 +145,10 @@ export const OramaMarkdown = /*@__PURE__*/ defineContainer<JSX.OramaMarkdown>('o
 
 
 export const OramaModal = /*@__PURE__*/ defineContainer<JSX.OramaModal>('orama-modal', undefined, [
-  'open',
   'closeOnEscape',
   'closeOnOutsideClick',
   'mainTitle',
-  'modalStatusChanged'
+  'modalClosed'
 ]);
 
 
@@ -206,7 +206,8 @@ export const OramaSearchBox = /*@__PURE__*/ defineContainer<JSX.OramaSearchBox>(
   'answerGenerated',
   'answerSourceClick',
   'chatMarkdownLinkClicked',
-  'modalClosed'
+  'modalClosed',
+  'modalStatusChanged'
 ]);
 
 

packages/ui-stencil-vue/lib/vue-component-lib/utils.ts

@@ -115,16 +115,6 @@ export const defineContainer = <Props, VModelType = string | number | boolean>(
       if (routerLink === EMPTY_PROP) return;
 
       if (navManager !== undefined) {
-        /**
-         * This prevents the browser from
-         * performing a page reload when pressing
-         * an Ionic component with routerLink.
-         * The page reload interferes with routing
-         * and causes ion-back-button to disappear
-         * since the local history is wiped on reload.
-         */
-        ev.preventDefault();
-
         let navigationPayload: any = { event: ev };
         for (const key in props) {
           const value = props[key];
@@ -195,17 +185,6 @@ export const defineContainer = <Props, VModelType = string | number | boolean>(
         }
       }
 
-      // If router link is defined, add href to props
-      // in order to properly render an anchor tag inside
-      // of components that should become activatable and
-      // focusable with router link.
-      if (props[ROUTER_LINK_VALUE] !== EMPTY_PROP) {
-        propsToAdd = {
-          ...propsToAdd,
-          href: props[ROUTER_LINK_VALUE],
-        };
-      }
-
       /**
        * vModelDirective is only needed on components that support v-model.
        * As a result, we conditionally call withDirectives with v-model components.

packages/ui-stencil/.gitignore

@@ -1,6 +1,7 @@
 dist/
 www/
 loader/
+hydrate/
 
 *~
 *.sw[mnpcod]

packages/ui-stencil/extract-scss-vars.js

@@ -64,39 +64,39 @@ function compileScss(filePath) {
       },
       'background-color($arg1, $arg2)': (args) => {
         try {
-          const colorKey = args[0].assertString('arg1').text;
-          const palette = args[1].assertMap('arg2');
+          const colorKey = args[0].assertString('arg1').text
+          const palette = args[1].assertMap('arg2')
 
           // Find color value in background section
-          let colorValue = null;
+          let colorValue = null
           palette.contents.forEach((value, key) => {
             if (key.text === 'background') {
               value.contents.forEach((val, k) => {
-                if (k.text === colorKey) colorValue = val;
-              });
+                if (k.text === colorKey) colorValue = val
+              })
             }
-          });
+          })
 
-          if (!colorValue) return new sass.SassColor({ r: 0, g: 0, b: 0, a: 1 });
-          if (colorValue instanceof sass.SassColor) return colorValue;
+          if (!colorValue) return new sass.SassColor({ r: 0, g: 0, b: 0, a: 1 })
+          if (colorValue instanceof sass.SassColor) return colorValue
 
-          const colorStr = colorValue.toString();
+          const colorStr = colorValue.toString()
 
           // Handle named colors
-          if (colorStr === 'white') return new sass.SassColor({ r: 255, g: 255, b: 255, a: 1 });
-          if (colorStr === 'black') return new sass.SassColor({ r: 0, g: 0, b: 0, a: 1 });
-          if (colorStr === 'transparent') return new sass.SassColor({ r: 0, g: 0, b: 0, a: 0 });
+          if (colorStr === 'white') return new sass.SassColor({ r: 255, g: 255, b: 255, a: 1 })
+          if (colorStr === 'black') return new sass.SassColor({ r: 0, g: 0, b: 0, a: 1 })
+          if (colorStr === 'transparent') return new sass.SassColor({ r: 0, g: 0, b: 0, a: 0 })
 
           // Handle hex colors
           if (colorStr.startsWith('#')) {
-            const rgb = hexToRgb(colorStr);
-            return new sass.SassColor({ ...rgb, a: 1 });
+            const rgb = hexToRgb(colorStr)
+            return new sass.SassColor({ ...rgb, a: 1 })
           }
 
           // Default fallback
-          return new sass.SassColor({ r: 0, g: 0, b: 0, a: 1 });
+          return new sass.SassColor({ r: 0, g: 0, b: 0, a: 1 })
         } catch (error) {
-          return new sass.SassColor({ r: 0, g: 0, b: 0, a: 1 });
+          return new sass.SassColor({ r: 0, g: 0, b: 0, a: 1 })
         }
       },
       'border-color($arg1, $arg2)': (args) => {
@@ -127,21 +127,21 @@ function compileScss(filePath) {
       },
       'adjust($color, $kwargs)': (args) => {
         try {
-          const color = args[0].assertColor('color');
-          const kwargs = args[1].assertMap('kwargs');
-          const alphaAdjust = kwargs.get('alpha')?.assertNumber('alpha')?.value || 0;
-          
+          const color = args[0].assertColor('color')
+          const kwargs = args[1].assertMap('kwargs')
+          const alphaAdjust = kwargs.get('alpha')?.assertNumber('alpha')?.value || 0
+
           return new sass.SassColor({
             r: color.red,
             g: color.green,
             b: color.blue,
-            a: Math.max(0, Math.min(1, color.alpha + alphaAdjust))
-          });
+            a: Math.max(0, Math.min(1, color.alpha + alphaAdjust)),
+          })
         } catch (error) {
-          console.error('Error in adjust:', error);
-          return new sass.SassColor({ r: 0, g: 0, b: 0, a: 1 });
+          console.error('Error in adjust:', error)
+          return new sass.SassColor({ r: 0, g: 0, b: 0, a: 1 })
         }
-      }
+      },
     },
   })
   return result.css.toString()
@@ -205,7 +205,7 @@ async function extractExportVariables(css) {
 
     // Write the JavaScript file
     fs.writeFileSync('./src/config/colors.ts', `${comment}\n${jsContent}`, 'utf-8')
-        // remove the temporary file
+    // remove the temporary file
     fs.unlinkSync(scssFilePath)
     console.log('SCSS :export variables have been extracted to _colors.js')
   } catch (error) {

packages/ui-stencil/package.json

@@ -30,7 +30,7 @@
     "@orama/switch": "^3.0.0",
     "@oramacloud/client": "^2.1.0",
     "@phosphor-icons/webcomponents": "^2.1.5",
-    "@stencil/core": "^4.19.0",
+    "@stencil/core": "4.27.0",
     "@stencil/store": "^2.0.16",
     "dompurify": "^3.1.6",
     "highlight.js": "^11.10.0",
@@ -43,7 +43,7 @@
   "devDependencies": {
     "@stencil-community/postcss": "^2.2.0",
     "@stencil/angular-output-target": "^0.8.4",
-    "@stencil/react-output-target": "^0.5.3",
+    "@stencil/react-output-target": "^0.8.2",
     "@stencil/sass": "^3.0.12",
     "@stencil/store": "^2.0.16",
     "@stencil/vue-output-target": "^0.8.8",

packages/ui-stencil/src/ParentComponentStore/GlobalStore.ts

@@ -1,8 +1,10 @@
-import type { ObservableMap } from '@stencil/store'
+import { createStore, type ObservableMap } from '@stencil/store'
 
 export const GlobalStoreInitialProps = {
   open: false,
   currentTask: 'search' as 'search' | 'chat',
   currentTerm: '',
 }
 export type GlobalStoreType = ObservableMap<typeof GlobalStoreInitialProps>
+
+export const testGlobalStore = createStore(GlobalStoreInitialProps)