load runtime

package.json

@@ -7,6 +7,9 @@
  },
  "scripts": {
  "build": "lerna run build",
+ "build.core": "pnpm --filter component-library run build",
+ "build.react": "pnpm --filter component-library-react run build",
+ "build.vue": "pnpm --filter component-library-vue run build",
  "changelog": "lerna-changelog",
  "prettier": "lerna run prettier",
  "prettier.dry-run": "lerna run prettier.dry-run",

packages/example-project/component-library/package.json

@@ -25,13 +25,25 @@
  },
  "./hydrate": {
  "types": "./hydrate/index.d.ts",
- "import": "./hydrate/index.mjs",
- "require": "./hydrate/index.js",
- "default": "./hydrate/index.mjs"
+ "import": "./hydrate/index.js",
+ "require": "./hydrate/index.cjs.js",
+ "default": "./hydrate/index.js"
  },
- "./components/*": {
+ "./loader": {
+ "types": "./loader/index.d.ts",
+ "import": "./loader/index.js",
+ "require": "./loader/index.js",
+ "default": "./loader/index.js"
+ },
+ "./components/*.js": {
  "types": "./dist/types/components/*.d.ts",
  "import": "./components/*.js"
+ },
+ "./components": {
+ "types": "./dist/types/components.d.ts",
+ "import": "./dist/index.js",
+ "require": "./dist/index.cjs.js",
+ "default": "./dist/index.js"
  }
  },
  "files": [

packages/example-project/component-library/stencil.config.ts

@@ -66,6 +66,9 @@ export const config: Config = {
  hydrateModule: 'component-library/hydrate'
  }),
  vueOutputTarget({
+ includeImportCustomElements: false,
+ includePolyfills: false,
+ includeDefineCustomElements: false,
  componentCorePackage: 'component-library',
  hydrateModule: 'component-library/hydrate',
  proxiesFile: '../component-library-vue/src/index.ts',

packages/example-project/nuxt-app/components/Input.vue

@@ -1,8 +1,8 @@
 <script>
-import { ref } from 'vue';
+import { defineComponent, ref } from 'vue';
 import { MyInput } from 'component-library-vue';
 
-export default {
+export default defineComponent({
  name: 'Input',
  components: {
  MyInput,
@@ -28,7 +28,7 @@ export default {
  handleChange,
  };
  },
-};
+});
 </script>
 
 <style scoped>

packages/vue-output-target/src/generate-vue-component.ts

@@ -6,7 +6,7 @@ export const createComponentDefinition =
  (importTypes: string, outputTarget: OutputTargetVue) =>
  (cmpMeta: Pick<ComponentCompilerMeta, 'properties' | 'tagName' | 'methods' | 'events'>) => {
  const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
- const importAs = outputTarget.includeDefineCustomElements ? 'define' + tagNameAsPascal : 'undefined';
+ const importAs = outputTarget.includeImportCustomElements ? 'define' + tagNameAsPascal : 'undefined';
 
  let props: string[] = [];
  let propMap: Record<string, [string, string | undefined]> = {};