romhml · Mar 1, 2025 · Feb 27, 2025 · Feb 28, 2025 · Mar 1, 2025 · Mar 1, 2025
diff --git a/.npmrc b/.npmrc
@@ -1,2 +1,3 @@
 shamefully-hoist=true
 strict-peer-dependencies=false
+node-linker=hoisted
diff --git a/README.md b/README.md
@@ -148,7 +148,7 @@ compodium
 
 ### Default Props
 
-You can use the `extendCompodiumMeta` in your component to pass default values for required properties:
+You can use the `extendCompodiumMeta` in your component or in examples to pass default values for required properties:
 ```ts
 const props = defineProps<{ label: string }>()
 
@@ -158,6 +158,8 @@ extendCompodiumMeta({
   }
 })
 ```
+> [!WARNING]
+> `extendCompodiumMeta` is a macro that is evaluated at compile time. As such, you can only use literal values, and can't reference variables.
 
 Alternatively, you can specify default properties for your components in your `app.config.ts` file:
 

diff --git a/build.config.ts b/build.config.ts
@@ -5,5 +5,8 @@ export default defineBuildConfig({
     'process.env.DEV': 'false',
     'process.env.COMPODIUM_LOCAL': 'false',
     'process.env.COMPODIUM_TEST': 'false'
-  }
+  },
+  externals: [
+    'typescript'
+  ]
 })
diff --git a/devtools/app/pages/components/[id].vue b/devtools/app/pages/components/[id].vue
@@ -2,7 +2,7 @@
 import { useColorMode, useDebounceFn } from '@vueuse/core'
 import { useFuse } from '@vueuse/integrations/useFuse'
 import type { ComponentMeta, CompodiumHooks } from '#module/types'
-import type { PropertyMeta } from 'vue-component-meta'
+import type { PropertyMeta } from '@compodium/meta'
 import { camelCase, pascalCase } from 'scule'
 import { createHooks } from 'hookable'
 
@@ -29,13 +29,13 @@ const component = computed(() => {
 
 function getDefaultProps(component: ComponentMeta): Record<string, any> {
   return component.meta?.props?.reduce((acc: Record<string, any>, prop: any) => {
-    const value = getDefaultPropValue(prop)
+    const value = evalPropValue(prop)
     if (value !== undefined) acc[prop.name] = value
     return acc
   }, {})
 }
 
-function getDefaultPropValue(meta: Partial<PropertyMeta>) {
+function evalPropValue(meta: Partial<PropertyMeta>) {
   if (!meta.default) return
   try {
     return new Function(`return ${meta.default}`)()
@@ -44,58 +44,52 @@ function getDefaultPropValue(meta: Partial<PropertyMeta>) {
   }
 }
 
-const { data: componentMeta, refresh: refreshComponent } = useAsyncData('__compodium-fetch-meta', async () => {
-  const meta = await $fetch<ComponentMeta>(`/api/component-meta/${componentId.value}`, { baseURL: '/__compodium__' })
-  defaultProps.value = getDefaultProps(meta)
+const { data: componentMeta, refresh: refreshComponentMeta } = useAsyncData('__compodium-fetch-meta', async () => {
+  const component = await $fetch<ComponentMeta>(`/api/component-meta/${componentId.value}`, { baseURL: '/__compodium__' })
+  return component
+}, { watch: [componentId] })
 
-  if (!componentMeta.value || componentMeta.value?.componentId !== componentId.value) {
-    updateComponent()
-  }
+const { data: exampleMeta } = useAsyncData('__compodium-fetch-example-meta', async () => {
+  const example = await $fetch<ComponentMeta>(`/api/component-meta/${exampleId.value}`, { baseURL: '/__compodium__' })
+  return example
+}, { watch: [exampleId] })
 
-  return meta
-}, { watch: [componentId] })
+watch([exampleMeta, componentMeta], async ([newExampleMeta, newComponentMeta], [oldExampleMeta, oldComponentMeta]) => {
+  if (!newComponentMeta) return
+
+  // Don't refresh props if the change was initiated by HMR
+  if (
+    newComponentMeta?.componentId === oldComponentMeta?.componentId
+    && newExampleMeta?.pascalName === oldExampleMeta?.pascalName
+  ) return
+
+  defaultProps.value = {
+    ...getDefaultProps(newComponentMeta),
+    ...(newExampleMeta?.meta?.compodium?.defaultProps ?? newComponentMeta?.meta?.compodium?.defaultProps)
+  }
+  props.value = { ...defaultProps.value }
+  await updateComponent()
+})
 
 watch(component, async (oldValue, newValue) => {
   if (oldValue.componentId === newValue.componentId) updateComponent()
 })
 
 async function updateComponent() {
-  props.value = { ...defaultProps.value }
   await hooks.callHook('renderer:update-component', {
     collectionId: component.value.collectionId,
     componentId: component.value.componentId,
     baseName: component.value.baseName,
-    path: component.value.filePath
+    path: component.value.filePath,
+    props: props.value
   })
 }
 
-async function updateRenderer() {
-  await hooks.callHook('renderer:update-props', { props: props.value })
-}
-
-const updateRendererDebounced = useDebounceFn(updateRenderer, 100, { maxWait: 300 })
-
-function onComponentLoaded() {
-  updateRenderer()
-}
-
-async function updateDefaultProps(payload: { componentId: string, defaultProps: any }) {
-  if (componentId.value !== payload.componentId) return
-  props.value = { ...defaultProps.value, ...payload.defaultProps, ...props.value }
-  compodiumDefaultProps.value = { ...payload.defaultProps }
-  await hooks.callHook('renderer:update-props', { props: props.value })
-}
+const updatePropsDebounced = useDebounceFn(() => hooks.callHook('renderer:update-props', { props: props.value }), 100, { maxWait: 300 })
 
 const hooks = createHooks<CompodiumHooks>()
 
-hooks.hook('renderer:mounted', () => hooks.callHook('renderer:update-component', {
-  collectionId: component.value.collectionId,
-  componentId: component.value.componentId,
-  baseName: component.value.baseName,
-  path: component.value.filePath
-}))
-
-hooks.hook('renderer:component-loaded', onComponentLoaded)
+hooks.hook('renderer:mounted', updateComponent)
 
 hooks.hook('component:added', useDebounceFn(async () => {
   await Promise.all([
@@ -105,8 +99,7 @@ hooks.hook('component:added', useDebounceFn(async () => {
 }, 300))
 
 hooks.hook('component:removed', useDebounceFn(fetchCollections, 300))
-hooks.hook('component:changed', useDebounceFn(() => refreshComponent(), 300))
-hooks.hook('devtools:update-default-props', updateDefaultProps)
+hooks.hook('component:changed', useDebounceFn(() => refreshComponentMeta(), 300))
 
 onMounted(() => window.__COMPODIUM_HOOKS__ = hooks)
 
@@ -135,7 +128,7 @@ function onResetState() {
   setTimeout(() => isRotated.value = false, 500)
   isRotated.value = true
   props.value = { ...defaultProps.value, ...compodiumDefaultProps.value }
-  updateRendererDebounced()
+  updatePropsDebounced()
 }
 
 const componentProps = computed(() => componentMeta.value?.meta?.props ?? [])
@@ -227,7 +220,7 @@ watch(component, () => propsSearchTerm.value = '')
               :name="prop.name"
               :description="prop.description"
               class="p-4 rounded"
-              @update:model-value="updateRendererDebounced"
+              @update:model-value="updatePropsDebounced"
             />
           </div>
         </div>

diff --git a/devtools/package.json b/devtools/package.json
@@ -20,6 +20,7 @@
     "shiki": "^3.0.0"
   },
   "devDependencies": {
-    "@iconify-json/lucide": "^1.2.26"
+    "@iconify-json/lucide": "^1.2.26",
+    "@compodium/meta": "workspace:*"
   }
 }
diff --git a/meta/LICENSE b/meta/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Johnson Chu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/meta/README.md b/meta/README.md
@@ -0,0 +1,3 @@
+# Meta
+
+This package is a modified version of `vue-component-meta` from [vue-language-tools](https://github.com/vuejs/language-tools). It was imported and modified to define a macro to extend component meta (`extendCompodiumMeta`). This macro is used by Compodium to pass additional configuration for components.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Meta

		This package is a modified version of `vue-component-meta` from [vue-language-tools](https://github.com/vuejs/language-tools). It was imported and modified to define a macro to extend component meta (`extendCompodiumMeta`). This macro is used by Compodium to pass additional configuration for components.