update files

packages/angular-output-target/src/generate-value-accessors.ts

@@ -90,6 +90,7 @@ function copyResources(config: Config, resourcesFilesToCopy: string[], directory
  dest: path.join(directory, rf),
  keepDirStructure: false,
  warn: false,
+ ignore: [],
  };
  });
  return config.sys.copy(copyTasks, path.join(directory));

packages/angular-output-target/src/output-angular.ts

@@ -54,6 +54,7 @@ async function copyResources(config: Config, outputTarget: OutputTargetAngular)
  dest: destDirectory,
  keepDirStructure: false,
  warn: false,
+ ignore: [],
  },
  ],
  srcDirectory

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

@@ -27,13 +27,11 @@
  },
  "types": "./dist/index.d.ts",
  "devDependencies": {
- "@types/jest": "^26.0.23",
- "@vue/server-renderer": "~3.1.1",
- "@vue/test-utils": "^2.0.0-rc.6",
- "jest": "^26.1.0",
- "rimraf": "^5.0.0",
- "typescript": "^4.3.2",
- "vue": "~3.1.1"
+ "@vue/server-renderer": "~3.5.10",
+ "@vue/test-utils": "^2.4.6",
+ "rimraf": "^6.0.1",
+ "typescript": "^5.6.2",
+ "vue": "~3.5.10"
  },
  "dependencies": {
  "component-library": "workspace:*",

packages/example-project/component-library-vue/src/index.ts

@@ -77,6 +77,7 @@ export const MyComponent = /*@__PURE__*/ globalThis.window
  'last',
  'age',
  'kidsNames',
+ 'favoriteKidName',
  'myCustomEvent',
  ])
  : defineStencilSSRComponent({
@@ -88,6 +89,7 @@ export const MyComponent = /*@__PURE__*/ globalThis.window
  last: String,
  age: Number,
  kidsNames: String,
+ favoriteKidName: String,
  onMyCustomEvent: Function,
  },
  });

packages/example-project/component-library-vue/tsconfig.json

@@ -18,7 +18,6 @@
  "sourceMap": true,
  "jsx": "react",
  "target": "esnext",
- "types": ["jest"],
  "skipLibCheck": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],

packages/example-project/next-app/src/app/components.server.ts

@@ -39,6 +39,21 @@ export const MyButton: StencilReactComponent<MyButtonElement, MyButtonEvents> =
  })
  : /*@__PURE__*/ createSSRComponent<MyButtonElement, MyButtonEvents>({
  tagName: 'my-button',
+ properties: {
+ color: 'color',
+ buttonType: 'button-type',
+ disabled: 'disabled',
+ expand: 'expand',
+ fill: 'fill',
+ download: 'download',
+ href: 'href',
+ rel: 'rel',
+ shape: 'shape',
+ size: 'size',
+ strong: 'strong',
+ target: 'target',
+ type: 'type'
+ },
  hydrateModule: import('component-library/hydrate')
  });
 
@@ -62,6 +77,14 @@ export const MyCheckbox: StencilReactComponent<MyCheckboxElement, MyCheckboxEven
  })
  : /*@__PURE__*/ createSSRComponent<MyCheckboxElement, MyCheckboxEvents>({
  tagName: 'my-checkbox',
+ properties: {
+ color: 'color',
+ name: 'name',
+ checked: 'checked',
+ indeterminate: 'indeterminate',
+ disabled: 'disabled',
+ value: 'value'
+ },
  hydrateModule: import('component-library/hydrate')
  });
 
@@ -77,6 +100,13 @@ export const MyComponent: StencilReactComponent<MyComponentElement, MyComponentE
  })
  : /*@__PURE__*/ createSSRComponent<MyComponentElement, MyComponentEvents>({
  tagName: 'my-component',
+ properties: {
+ first: 'first',
+ middle: 'middle',
+ last: 'last',
+ age: 'age',
+ favoriteKidName: 'favorite-kid-name'
+ },
  hydrateModule: import('component-library/hydrate')
  });
 
@@ -102,6 +132,34 @@ export const MyInput: StencilReactComponent<MyInputElement, MyInputEvents> = typ
  })
  : /*@__PURE__*/ createSSRComponent<MyInputElement, MyInputEvents>({
  tagName: 'my-input',
+ properties: {
+ color: 'color',
+ accept: 'accept',
+ autocapitalize: 'autocapitalize',
+ autocomplete: 'autocomplete',
+ autocorrect: 'autocorrect',
+ autofocus: 'autofocus',
+ clearInput: 'clear-input',
+ clearOnEdit: 'clear-on-edit',
+ disabled: 'disabled',
+ enterkeyhint: 'enterkeyhint',
+ inputmode: 'inputmode',
+ max: 'max',
+ maxlength: 'maxlength',
+ min: 'min',
+ minlength: 'minlength',
+ multiple: 'multiple',
+ name: 'name',
+ pattern: 'pattern',
+ placeholder: 'placeholder',
+ readonly: 'readonly',
+ required: 'required',
+ spellcheck: 'spellcheck',
+ step: 'step',
+ size: 'size',
+ type: 'type',
+ value: 'value'
+ },
  hydrateModule: import('component-library/hydrate')
  });
 
@@ -127,6 +185,16 @@ export const MyPopover: StencilReactComponent<MyPopoverElement, MyPopoverEvents>
  })
  : /*@__PURE__*/ createSSRComponent<MyPopoverElement, MyPopoverEvents>({
  tagName: 'my-popover',
+ properties: {
+ component: 'component',
+ keyboardClose: 'keyboard-close',
+ cssClass: 'css-class',
+ backdropDismiss: 'backdrop-dismiss',
+ event: 'event',
+ showBackdrop: 'show-backdrop',
+ translucent: 'translucent',
+ animated: 'animated'
+ },
  hydrateModule: import('component-library/hydrate')
  });
 
@@ -150,6 +218,12 @@ export const MyRadio: StencilReactComponent<MyRadioElement, MyRadioEvents> = typ
  })
  : /*@__PURE__*/ createSSRComponent<MyRadioElement, MyRadioEvents>({
  tagName: 'my-radio',
+ properties: {
+ color: 'color',
+ name: 'name',
+ disabled: 'disabled',
+ value: 'value'
+ },
  hydrateModule: import('component-library/hydrate')
  });
 
@@ -165,6 +239,11 @@ export const MyRadioGroup: StencilReactComponent<MyRadioGroupElement, MyRadioGro
  })
  : /*@__PURE__*/ createSSRComponent<MyRadioGroupElement, MyRadioGroupEvents>({
  tagName: 'my-radio-group',
+ properties: {
+ allowEmptySelection: 'allow-empty-selection',
+ name: 'name',
+ value: 'value'
+ },
  hydrateModule: import('component-library/hydrate')
  });
 
@@ -188,5 +267,19 @@ export const MyRange: StencilReactComponent<MyRangeElement, MyRangeEvents> = typ
  })
  : /*@__PURE__*/ createSSRComponent<MyRangeElement, MyRangeEvents>({
  tagName: 'my-range',
+ properties: {
+ color: 'color',
+ debounce: 'debounce',
+ name: 'name',
+ dualKnobs: 'dual-knobs',
+ min: 'min',
+ max: 'max',
+ pin: 'pin',
+ snaps: 'snaps',
+ step: 'step',
+ ticks: 'ticks',
+ disabled: 'disabled',
+ value: 'value'
+ },
  hydrateModule: import('component-library/hydrate')
  });

packages/react-output-target/src/react-output-target/create-component-wrappers.test.ts

@@ -230,12 +230,15 @@ export const MyComponent: StencilReactComponent<MyComponentElement, MyComponentE
  {
  tagName: 'my-component',
  componentClassName: 'MyComponent',
- properties: [{
- name: 'hasMaxLength',
- attribute: 'max-length'
- }, {
- name: 'links'
- }],
+ properties: [
+ {
+ name: 'hasMaxLength',
+ attribute: 'max-length',
+ },
+ {
+ name: 'links',
+ },
+ ],
  events: [
  {
  originalName: 'my-event',

packages/react-output-target/src/react-output-target/create-stencil-react-components.ts

@@ -158,8 +158,7 @@ import type { EventName, StencilReactComponent } from '@stencil/react-output-tar
  */
  .filter((prop) => Boolean(prop.attribute))
  .map((e) => `${e.name}: '${e.attribute}'`)
- .join(',\n')
- }},
+ .join(',\n')}},
  hydrateModule: import('${hydrateModule}')
  })`;
 

packages/react-output-target/src/react/ssr.tsx

@@ -65,7 +65,7 @@ export const createComponentForServerSideRendering = <I extends HTMLElement, E e
  if (!propName) {
  console.warn(
  `${LOG_PREFIX} ignore component property "${key}" for ${options.tagName} ` +
- '- property type is unknown or not a primitive and can\'t be serialized'
+  "- property type is unknown or not a primitive and can't be serialized"
  );
  continue;
  }

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

@@ -36,7 +36,7 @@ export const MyComponent = /*@__PURE__*/ defineContainer<Components.MyComponent>
  event: 'ionChange',
  targetAttr: 'value',
  },
- ]
+ ],
  });
  const output = generateComponentDefinition({
  properties: [