fix: Fixes patches and improves react and vue output target.

.gitignore

@@ -38,13 +38,8 @@ UserInterfaceState.xcuserstate
 
 src/**/components.d.ts
 
-# Stencil React bindings
-src/react.js
-src/react.d.ts
-src/react-component-lib
-src/vue.js
-src/vue.d.ts
-src/vue-component-lib
+# Stencil Framework output target temporary folder
+out/
 
 .husky
 .tool-versions

config/tsconfig.react.json

@@ -5,7 +5,7 @@
     "jsxFactory": "React.createElement",
     "outDir": "../dist"
   },
-  "include": ["../src/react.ts"],
+  "include": ["../out/react.ts"],
   "exclude": [
     "../node_modules",
     "../bin",

config/tsconfig.vue.json

@@ -4,7 +4,7 @@
     "declaration": true,
     "outDir": "../dist"
   },
-  "include": ["../src/vue.ts"],
+  "include": ["../out/vue.ts"],
   "exclude": [
     "../node_modules",
     "../bin",

package.json

@@ -23,6 +23,7 @@
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
   "unpkg": "dist/liquid/liquid.esm.js",
+  "sideEffects": false,
   "files": [
     "bin/",
     "dist/"
@@ -39,8 +40,8 @@
     "build:patch_loader": "ts-node scripts/patchLoader.ts",
     "build:stencil:components": "stencil build --config=stencil.config.ts && shx mv tmp/web-components.html-data.json dist/web-components.html-data.json && shx rm -r tmp",
     "build:stencil:docs": "stencil build --config=config/stencil.config.docs.ts",
-    "build:stencil:react": "tsc -p config/tsconfig.react.json && (shx rm src/react.ts & shx rm -r src/react-component-lib)",
-    "build:stencil:vue": "tsc -p config/tsconfig.vue.json && (shx rm src/vue.ts & shx rm -r src/vue-component-lib)",
+    "build:stencil:react": "ts-node scripts/patchReactOutput.ts && tsc -p config/tsconfig.react.json && (shx rm out/react.ts & shx rm -r out/react-component-lib)",
+    "build:stencil:vue": "ts-node scripts/patchVueOutput.ts && tsc -p config/tsconfig.vue.json && (shx rm out/vue.ts & shx rm -r out/vue-component-lib)",
     "build:styles": "run-s build:styles:liquid:globals build:styles:liquid:components",
     "build:styles:liquid:components": "postcss src/liquid/components/*/*.css src/liquid/components/*/*/*.css --config=config/postcss.config.cjs --no-map -d dist/css/ && trash dist/css/liquid.css 'dist/css/*.shadow.css' && bash scripts/concatStyles.sh",
     "build:styles:liquid:globals": "postcss src/liquid/global/styles/global.css --config=config/postcss.config.cjs --no-map -o dist/css/liquid.global.css",
@@ -194,8 +195,8 @@
   },
   "packageManager": "yarn@3.2.0",
   "resolutions": {
-    "@stencil/react-output-target@^0.3.1": "patch:@stencil/react-output-target@npm:0.3.1#.yarn/patches/@stencil-react-output-target-npm-0.3.1-4da13663f2.patch",
-    "@stencil/vue-output-target@^0.6.2": "patch:@stencil/vue-output-target@npm:0.6.2#.yarn/patches/@stencil-vue-output-target-npm-0.6.2-a9b3828cb9.patch"
+    "@stencil/react-output-target@^0.4.0": "patch:@stencil/react-output-target@npm:0.3.1#.yarn/patches/@stencil-react-output-target-npm-0.3.1-4da13663f2.patch",
+    "@stencil/vue-output-target@^0.7.0": "patch:@stencil/vue-output-target@npm:0.6.2#.yarn/patches/@stencil-vue-output-target-npm-0.6.2-a9b3828cb9.patch"
   },
   "eslintConfig": {
     "extends": [

scripts/patchReactOutput.ts

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const fs = require('fs')
+const filename = './out/react.ts'
+
+fs.readFile(filename, 'utf8', function (err, data) {
+  if (err) {
+    return console.log(err)
+  }
+
+  const result = data
+    .replace(
+      "import type { JSX } from '../dist/components'",
+      "import type { JSX } from '../dist/types/components'"
+    )
+    .replace(
+      "import { defineCustomElements } from '../dist/components/dist/loader/index.js';",
+      "import { defineCustomElements } from '../dist/loader/index.js';"
+    )
+
+  fs.writeFile(filename, result, 'utf8', function (err) {
+    if (err) return console.log(err)
+  })
+})

scripts/patchVueOutput.ts

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const fs = require('fs')
+const filename = './out/vue.ts'
+
+fs.readFile(filename, 'utf8', function (err, data) {
+  if (err) {
+    return console.log(err)
+  }
+
+  const result = data
+    .replace(
+      "import type { JSX } from '../dist/components'",
+      "import type { JSX } from '../dist/types/components'"
+    )
+    .replace(
+      "import { defineCustomElements } from '../dist/components/dist/loader/index.js';",
+      "import { defineCustomElements } from '../dist/loader/index.js';"
+    )
+
+  fs.writeFile(filename, result, 'utf8', function (err) {
+    if (err) return console.log(err)
+  })
+})

src/liquid/components/ld-slider/ld-slider.tsx

@@ -94,7 +94,8 @@ export class LdSlider implements InnerFocusable {
   /** Adds custom stop points to the slider (instead of steps) */
   @Prop() unit?: string
   /** Specifies the default value */
-  @Prop({ mutable: true, reflect: true }) value?: string | number = this.min
+  @Prop({ mutable: true, reflect: true }) value?: string | number | number[] =
+    this.min
   /** Width of the slider */
   @Prop() width? = '100%'
 

src/liquid/components/ld-slider/readme.md

@@ -395,31 +395,31 @@ return (
 
 ## Properties
 
-| Property          | Attribute           | Description                                                  | Type               | Default     |
-| ----------------- | ------------------- | ------------------------------------------------------------ | ------------------ | ----------- |
-| `ariaDisabled`    | `aria-disabled`     | Alternative disabled state that keeps element focusable      | `string`           | `undefined` |
-| `disabled`        | `disabled`          | Disabled state of the slider                                 | `boolean`          | `false`     |
-| `hideStopLabels`  | `hide-stop-labels`  | Prevents rendering of the stop labels below the slider       | `boolean`          | `false`     |
-| `hideValueLabels` | `hide-value-labels` | Prevents rendering of the value labels below the slider      | `boolean`          | `false`     |
-| `hideValues`      | `hide-values`       | Makes the current values only visible on interaction         | `boolean`          | `false`     |
-| `indicators`      | `indicators`        | Specifies the legal number intervals                         | `boolean`          | `false`     |
-| `key`             | `key`               | for tracking the node's identity when working with lists     | `string \| number` | `undefined` |
-| `labelFrom`       | `label-from`        | "From" value label (when exactly 2 values are given)         | `string`           | `'From'`    |
-| `labelTo`         | `label-to`          | "To" value label (when exactly 2 values are given)           | `string`           | `'To'`      |
-| `labelValue`      | `label-value`       | "Value" label (when exactly 2 values are given)              | `string`           | `'Value'`   |
-| `ldTabindex`      | `ld-tabindex`       | Tab index of the input(s).                                   | `number`           | `undefined` |
-| `max`             | `max`               | Specifies the maximum value allowed                          | `number`           | `100`       |
-| `min`             | `min`               | Specifies the minimum value allowed                          | `number`           | `0`         |
-| `negative`        | `negative`          | Swap which areas are being marked as selected and deselected | `boolean`          | `false`     |
-| `ref`             | `ref`               | reference to component                                       | `any`              | `undefined` |
-| `size`            | `size`              | Size of the thumb(s).                                        | `"lg" \| "sm"`     | `undefined` |
-| `snapOffset`      | `snap-offset`       | Offset inside which a thumb snaps to a stop point            | `number`           | `undefined` |
-| `step`            | `step`              | Specifies the legal number intervals                         | `number`           | `undefined` |
-| `stops`           | `stops`             | Adds custom stop points to the slider (instead of steps)     | `string`           | `undefined` |
-| `swappable`       | `swappable`         | Allows swapping of thumbs                                    | `boolean`          | `false`     |
-| `unit`            | `unit`              | Adds custom stop points to the slider (instead of steps)     | `string`           | `undefined` |
-| `value`           | `value`             | Specifies the default value                                  | `number \| string` | `this.min`  |
-| `width`           | `width`             | Width of the slider                                          | `string`           | `'100%'`    |
+| Property          | Attribute           | Description                                                  | Type                           | Default     |
+| ----------------- | ------------------- | ------------------------------------------------------------ | ------------------------------ | ----------- |
+| `ariaDisabled`    | `aria-disabled`     | Alternative disabled state that keeps element focusable      | `string`                       | `undefined` |
+| `disabled`        | `disabled`          | Disabled state of the slider                                 | `boolean`                      | `false`     |
+| `hideStopLabels`  | `hide-stop-labels`  | Prevents rendering of the stop labels below the slider       | `boolean`                      | `false`     |
+| `hideValueLabels` | `hide-value-labels` | Prevents rendering of the value labels below the slider      | `boolean`                      | `false`     |
+| `hideValues`      | `hide-values`       | Makes the current values only visible on interaction         | `boolean`                      | `false`     |
+| `indicators`      | `indicators`        | Specifies the legal number intervals                         | `boolean`                      | `false`     |
+| `key`             | `key`               | for tracking the node's identity when working with lists     | `string \| number`             | `undefined` |
+| `labelFrom`       | `label-from`        | "From" value label (when exactly 2 values are given)         | `string`                       | `'From'`    |
+| `labelTo`         | `label-to`          | "To" value label (when exactly 2 values are given)           | `string`                       | `'To'`      |
+| `labelValue`      | `label-value`       | "Value" label (when exactly 2 values are given)              | `string`                       | `'Value'`   |
+| `ldTabindex`      | `ld-tabindex`       | Tab index of the input(s).                                   | `number`                       | `undefined` |
+| `max`             | `max`               | Specifies the maximum value allowed                          | `number`                       | `100`       |
+| `min`             | `min`               | Specifies the minimum value allowed                          | `number`                       | `0`         |
+| `negative`        | `negative`          | Swap which areas are being marked as selected and deselected | `boolean`                      | `false`     |
+| `ref`             | `ref`               | reference to component                                       | `any`                          | `undefined` |
+| `size`            | `size`              | Size of the thumb(s).                                        | `"lg" \| "sm"`                 | `undefined` |
+| `snapOffset`      | `snap-offset`       | Offset inside which a thumb snaps to a stop point            | `number`                       | `undefined` |
+| `step`            | `step`              | Specifies the legal number intervals                         | `number`                       | `undefined` |
+| `stops`           | `stops`             | Adds custom stop points to the slider (instead of steps)     | `string`                       | `undefined` |
+| `swappable`       | `swappable`         | Allows swapping of thumbs                                    | `boolean`                      | `false`     |
+| `unit`            | `unit`              | Adds custom stop points to the slider (instead of steps)     | `string`                       | `undefined` |
+| `value`           | `value`             | Specifies the default value                                  | `number \| number[] \| string` | `this.min`  |
+| `width`           | `width`             | Width of the slider                                          | `string`                       | `'100%'`    |
 
 
 ## Events

stencil.config.ts

@@ -1,23 +1,42 @@
 import { Config } from '@stencil/core'
 import { postcss } from '@stencil/postcss'
 import { reactOutputTarget } from '@stencil/react-output-target'
-import { vueOutputTarget } from '@stencil/vue-output-target'
+import {
+  ComponentModelConfig,
+  vueOutputTarget,
+} from '@stencil/vue-output-target'
 import postcssConfig from './config/postcss.config.cjs'
 
+const vueComponentModels: ComponentModelConfig[] = [
+  {
+    elements: ['ld-input', 'ld-slider'],
+    event: 'input',
+    externalEvent: 'input',
+    targetAttr: 'value',
+  },
+  {
+    elements: ['ld-checkbox', 'ld-toggle'],
+    event: 'input',
+    externalEvent: 'input',
+    targetAttr: 'checked',
+  },
+]
+
 export const config: Config = {
   namespace: 'liquid',
   srcDir: 'src/liquid',
   globalStyle: 'src/liquid/global/styles/global.css',
   outputTargets: [
     reactOutputTarget({
-      componentCorePackage: '..',
-      proxiesFile: './src/react.ts',
+      componentCorePackage: '../dist/components',
+      proxiesFile: './out/react.ts',
       includeDefineCustomElements: true,
     }),
     vueOutputTarget({
-      componentCorePackage: '..',
-      proxiesFile: './src/vue.ts',
+      componentCorePackage: '../dist/components',
+      proxiesFile: './out/vue.ts',
       includeDefineCustomElements: true,
+      componentModels: vueComponentModels,
     }),
     {
       type: 'dist',

yarn.lock

@@ -2558,21 +2558,39 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@stencil/react-output-target@npm:^0.4.0":
-  version: 0.4.0
-  resolution: "@stencil/react-output-target@npm:0.4.0"
+"@stencil/react-output-target@npm:0.3.1":
+  version: 0.3.1
+  resolution: "@stencil/react-output-target@npm:0.3.1"
   peerDependencies:
-    "@stencil/core": ^2.9.0 || ^3.0.0-beta.0
-  checksum: a88a53f4d8f41c0b0a665f59dddd88986be095b6ed3d9fbbab30f5376cd1247c7d04711fe6ac0530777ddb67d5b79bbc2c6660d49409449e39fb2bf186f76ccd
+    "@stencil/core": ^2.9.0
+  checksum: fe311ba81f79119598524ceedf7125ff77bba22999b7394de774231262e5b7be28d5c46f6e05df1cde8947e24b03ccac797aa725738aa7bb6912536277b61d79
   languageName: node
   linkType: hard
 
-"@stencil/vue-output-target@npm:^0.7.0":
-  version: 0.7.0
-  resolution: "@stencil/vue-output-target@npm:0.7.0"
+"@stencil/react-output-target@patch:@stencil/react-output-target@npm:0.3.1#.yarn/patches/@stencil-react-output-target-npm-0.3.1-4da13663f2.patch::locator=%40emdgroup-liquid%2Fliquid%40workspace%3A.":
+  version: 0.3.1
+  resolution: "@stencil/react-output-target@patch:@stencil/react-output-target@npm%3A0.3.1#.yarn/patches/@stencil-react-output-target-npm-0.3.1-4da13663f2.patch::version=0.3.1&hash=cb7447&locator=%40emdgroup-liquid%2Fliquid%40workspace%3A."
+  peerDependencies:
+    "@stencil/core": ^2.9.0
+  checksum: 538fa2a50443bdf5561b05dd0c8932a5a1fd8ec58b48ed2e446fd82c81029c3f4fd2b8f4401898c473cffd90f64fba89ca5136961ad823f88864985e9a53f202
+  languageName: node
+  linkType: hard
+
+"@stencil/vue-output-target@npm:0.6.2":
+  version: 0.6.2
+  resolution: "@stencil/vue-output-target@npm:0.6.2"
+  peerDependencies:
+    "@stencil/core": ^2.9.0
+  checksum: bd25b6f88e93cce9450a90278d71b432f139d665446b77c841db7d09a644165075759c9e8dcd27e4b84fbbd0abaac8b39d11c28aaeb8cbe3156fef3e125080cc
+  languageName: node
+  linkType: hard
+
+"@stencil/vue-output-target@patch:@stencil/vue-output-target@npm:0.6.2#.yarn/patches/@stencil-vue-output-target-npm-0.6.2-a9b3828cb9.patch::locator=%40emdgroup-liquid%2Fliquid%40workspace%3A.":
+  version: 0.6.2
+  resolution: "@stencil/vue-output-target@patch:@stencil/vue-output-target@npm%3A0.6.2#.yarn/patches/@stencil-vue-output-target-npm-0.6.2-a9b3828cb9.patch::version=0.6.2&hash=705ecb&locator=%40emdgroup-liquid%2Fliquid%40workspace%3A."
   peerDependencies:
-    "@stencil/core": ^2.9.0 || ^3.0.0-beta.0
-  checksum: 3f6ea5961bb47269548289ffdd77c8d3303b49c78ec97a788d734dca4ac3b12960406192e19091027dd347ec617ed0ff7157e58a53833dd7c49e91b68b71b8f8
+    "@stencil/core": ^2.9.0
+  checksum: d22423d6bff0042a0975582f0730016e97f7a34518651562d71fa3203ccb48e1fc97a7c310319ab24eb8233d57f1f5c1a1b3ec281db3fd46a7343c2d811fe008
   languageName: node
   linkType: hard