@stencil/angular-output-target 0.10.2 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/README.md +7 -0
  2. package/dist/generate-angular-component.js +3 -3
  3. package/dist/generate-value-accessors.js +2 -2
  4. package/dist/index.cjs.js +7 -6
  5. package/dist/index.js +7 -6
  6. package/dist/plugin.js +2 -1
  7. package/dist/types.d.ts +2 -2
  8. package/package.json +4 -3
  9. package/resources/control-value-accessors/boolean-value-accessor.ts +1 -1
  10. package/resources/control-value-accessors/number-value-accessor.ts +1 -1
  11. package/resources/control-value-accessors/radio-value-accessor.ts +1 -1
  12. package/resources/control-value-accessors/select-value-accessor.ts +1 -1
  13. package/resources/control-value-accessors/text-value-accessor.ts +1 -1
package/README.md CHANGED
@@ -14,6 +14,13 @@ For a detailed guide on how to add the angular output target to a project, visit
14
14
  npm install @stencil/angular-output-target
15
15
  ```
16
16
 
17
+ ## Angular Support
18
+
19
+ | **@stencil/angular-output-target** | **Angular** |
20
+ |------------------------------------|-----------------|
21
+ | 0.10.2 | v18.x and lower |
22
+ | 1.0.0 | v19.x and above |
23
+
17
24
  ## Usage
18
25
 
19
26
  In your `stencil.config.ts` add the following configuration to the `outputTargets` section:
package/dist/generate-angular-component.js CHANGED
@@ -12,7 +12,7 @@ function createPropertyDeclaration(prop, type, inlinePropertyAsSetter = false) {
12
12
  let eventName = prop.name;
13
13
  if (/[-/]/.test(prop.name)) {
14
14
  // If a member name includes a dash or a forward slash, we need to wrap it in quotes.
15
- // https://github.com/ionic-team/stencil-ds-output-targets/issues/212
15
+ // https://github.com/stenciljs/output-targets/issues/212
16
16
  eventName = `'${prop.name}'`;
17
17
  }
18
18
  if (inlinePropertyAsSetter) {
@@ -59,8 +59,8 @@ export const createAngularComponentDefinition = (tagName, inputs, outputs, metho
59
59
  proxyCmpOptions.push(`\n methods: [${formattedMethods}]`);
60
60
  }
61
61
  let standaloneOption = '';
62
- if (standalone && includeImportCustomElements) {
63
- standaloneOption = `\n standalone: true`;
62
+ if (!standalone) {
63
+ standaloneOption = `\n standalone: false`;
64
64
  }
65
65
  const propertyDeclarations = inlineComponentProps.map((m) => createPropertyDeclaration(m, `Components.${tagNameAsPascal}['${m.name}']`, true));
66
66
  const propertiesDeclarationText = [`protected el: HTML${tagNameAsPascal}Element;`, ...propertyDeclarations].join('\n ');
package/dist/generate-value-accessors.js CHANGED
@@ -36,7 +36,7 @@ export function createValueAccessor(srcFileContents, valueAccessor, outputType)
36
36
  return srcFileContents
37
37
  .replace(VALUE_ACCESSOR_SELECTORS, valueAccessor.elementSelectors.join(', '))
38
38
  .replace(VALUE_ACCESSOR_EVENTTARGETS, hostContents.join(`,${EOL}`))
39
- .replace(VALUE_ACCESSOR_STANDALONE, outputType && outputType === OutputTypes.Standalone ? ',standalone: true' : '');
39
+ .replace(VALUE_ACCESSOR_STANDALONE, outputType && outputType !== OutputTypes.Standalone ? ',\nstandalone: false' : '');
40
40
  }
41
41
  function copyResources(config, resourcesFilesToCopy, directory) {
42
42
  if (!config.sys || !config.sys.copy) {
@@ -57,4 +57,4 @@ const VALUE_ACCESSOR_SELECTORS = `<VALUE_ACCESSOR_SELECTORS>`;
57
57
  const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
58
58
  const VALUE_ACCESSOR_TARGETATTR = '<VALUE_ACCESSOR_TARGETATTR>';
59
59
  const VALUE_ACCESSOR_STANDALONE = '<VALUE_ACCESSOR_STANDALONE>';
60
- const VALUE_ACCESSOR_EVENTTARGETS = ` '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'`;
60
+ const VALUE_ACCESSOR_EVENTTARGETS = ` '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target?.["<VALUE_ACCESSOR_TARGETATTR>"])'`;
package/dist/index.cjs.js CHANGED
@@ -157,7 +157,7 @@ function createPropertyDeclaration(prop, type, inlinePropertyAsSetter = false) {
157
157
  let eventName = prop.name;
158
158
  if (/[-/]/.test(prop.name)) {
159
159
  // If a member name includes a dash or a forward slash, we need to wrap it in quotes.
160
- // https://github.com/ionic-team/stencil-ds-output-targets/issues/212
160
+ // https://github.com/stenciljs/output-targets/issues/212
161
161
  eventName = `'${prop.name}'`;
162
162
  }
163
163
  if (inlinePropertyAsSetter) {
@@ -204,8 +204,8 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
204
204
  proxyCmpOptions.push(`\n methods: [${formattedMethods}]`);
205
205
  }
206
206
  let standaloneOption = '';
207
- if (standalone && includeImportCustomElements) {
208
- standaloneOption = `\n standalone: true`;
207
+ if (!standalone) {
208
+ standaloneOption = `\n standalone: false`;
209
209
  }
210
210
  const propertyDeclarations = inlineComponentProps.map((m) => createPropertyDeclaration(m, `Components.${tagNameAsPascal}['${m.name}']`, true));
211
211
  const propertiesDeclarationText = [`protected el: HTML${tagNameAsPascal}Element;`, ...propertyDeclarations].join('\n ');
@@ -389,7 +389,7 @@ function createValueAccessor(srcFileContents, valueAccessor, outputType) {
389
389
  return srcFileContents
390
390
  .replace(VALUE_ACCESSOR_SELECTORS, valueAccessor.elementSelectors.join(', '))
391
391
  .replace(VALUE_ACCESSOR_EVENTTARGETS, hostContents.join(`,${os.EOL}`))
392
- .replace(VALUE_ACCESSOR_STANDALONE, outputType && outputType === OutputTypes.Standalone ? ',standalone: true' : '');
392
+ .replace(VALUE_ACCESSOR_STANDALONE, outputType && outputType !== OutputTypes.Standalone ? ',\nstandalone: false' : '');
393
393
  }
394
394
  function copyResources$1(config, resourcesFilesToCopy, directory) {
395
395
  if (!config.sys || !config.sys.copy) {
@@ -410,7 +410,7 @@ const VALUE_ACCESSOR_SELECTORS = `<VALUE_ACCESSOR_SELECTORS>`;
410
410
  const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
411
411
  const VALUE_ACCESSOR_TARGETATTR = '<VALUE_ACCESSOR_TARGETATTR>';
412
412
  const VALUE_ACCESSOR_STANDALONE = '<VALUE_ACCESSOR_STANDALONE>';
413
- const VALUE_ACCESSOR_EVENTTARGETS = ` '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'`;
413
+ const VALUE_ACCESSOR_EVENTTARGETS = ` '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target?.["<VALUE_ACCESSOR_TARGETATTR>"])'`;
414
414
 
415
415
  /**
416
416
  * Creates an Angular module declaration for a component wrapper.
@@ -581,7 +581,8 @@ const angularOutputTarget = (outputTarget) => {
581
581
  };
582
582
  };
583
583
  function normalizeOutputTarget(config, outputTarget) {
584
- const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [], customElementsDir: outputTarget.customElementsDir || 'components', outputType: outputTarget.outputType || OutputTypes.Component });
584
+ var _a, _b;
585
+ const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [], customElementsDir: (_a = outputTarget.customElementsDir) !== null && _a !== void 0 ? _a : 'components', outputType: (_b = outputTarget.outputType) !== null && _b !== void 0 ? _b : OutputTypes.Standalone });
585
586
  if (config.rootDir == null) {
586
587
  throw new Error('rootDir is not set and it should be set by stencil itself');
587
588
  }
package/dist/index.js CHANGED
@@ -149,7 +149,7 @@ function createPropertyDeclaration(prop, type, inlinePropertyAsSetter = false) {
149
149
  let eventName = prop.name;
150
150
  if (/[-/]/.test(prop.name)) {
151
151
  // If a member name includes a dash or a forward slash, we need to wrap it in quotes.
152
- // https://github.com/ionic-team/stencil-ds-output-targets/issues/212
152
+ // https://github.com/stenciljs/output-targets/issues/212
153
153
  eventName = `'${prop.name}'`;
154
154
  }
155
155
  if (inlinePropertyAsSetter) {
@@ -196,8 +196,8 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
196
196
  proxyCmpOptions.push(`\n methods: [${formattedMethods}]`);
197
197
  }
198
198
  let standaloneOption = '';
199
- if (standalone && includeImportCustomElements) {
200
- standaloneOption = `\n standalone: true`;
199
+ if (!standalone) {
200
+ standaloneOption = `\n standalone: false`;
201
201
  }
202
202
  const propertyDeclarations = inlineComponentProps.map((m) => createPropertyDeclaration(m, `Components.${tagNameAsPascal}['${m.name}']`, true));
203
203
  const propertiesDeclarationText = [`protected el: HTML${tagNameAsPascal}Element;`, ...propertyDeclarations].join('\n ');
@@ -381,7 +381,7 @@ function createValueAccessor(srcFileContents, valueAccessor, outputType) {
381
381
  return srcFileContents
382
382
  .replace(VALUE_ACCESSOR_SELECTORS, valueAccessor.elementSelectors.join(', '))
383
383
  .replace(VALUE_ACCESSOR_EVENTTARGETS, hostContents.join(`,${EOL}`))
384
- .replace(VALUE_ACCESSOR_STANDALONE, outputType && outputType === OutputTypes.Standalone ? ',standalone: true' : '');
384
+ .replace(VALUE_ACCESSOR_STANDALONE, outputType && outputType !== OutputTypes.Standalone ? ',\nstandalone: false' : '');
385
385
  }
386
386
  function copyResources$1(config, resourcesFilesToCopy, directory) {
387
387
  if (!config.sys || !config.sys.copy) {
@@ -402,7 +402,7 @@ const VALUE_ACCESSOR_SELECTORS = `<VALUE_ACCESSOR_SELECTORS>`;
402
402
  const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
403
403
  const VALUE_ACCESSOR_TARGETATTR = '<VALUE_ACCESSOR_TARGETATTR>';
404
404
  const VALUE_ACCESSOR_STANDALONE = '<VALUE_ACCESSOR_STANDALONE>';
405
- const VALUE_ACCESSOR_EVENTTARGETS = ` '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'`;
405
+ const VALUE_ACCESSOR_EVENTTARGETS = ` '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target?.["<VALUE_ACCESSOR_TARGETATTR>"])'`;
406
406
 
407
407
  /**
408
408
  * Creates an Angular module declaration for a component wrapper.
@@ -573,7 +573,8 @@ const angularOutputTarget = (outputTarget) => {
573
573
  };
574
574
  };
575
575
  function normalizeOutputTarget(config, outputTarget) {
576
- const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [], customElementsDir: outputTarget.customElementsDir || 'components', outputType: outputTarget.outputType || OutputTypes.Component });
576
+ var _a, _b;
577
+ const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [], customElementsDir: (_a = outputTarget.customElementsDir) !== null && _a !== void 0 ? _a : 'components', outputType: (_b = outputTarget.outputType) !== null && _b !== void 0 ? _b : OutputTypes.Standalone });
577
578
  if (config.rootDir == null) {
578
579
  throw new Error('rootDir is not set and it should be set by stencil itself');
579
580
  }
package/dist/plugin.js CHANGED
@@ -17,7 +17,8 @@ export const angularOutputTarget = (outputTarget) => {
17
17
  };
18
18
  };
19
19
  export function normalizeOutputTarget(config, outputTarget) {
20
- const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [], customElementsDir: outputTarget.customElementsDir || 'components', outputType: outputTarget.outputType || OutputTypes.Component });
20
+ var _a, _b;
21
+ const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [], customElementsDir: (_a = outputTarget.customElementsDir) !== null && _a !== void 0 ? _a : 'components', outputType: (_b = outputTarget.outputType) !== null && _b !== void 0 ? _b : OutputTypes.Standalone });
21
22
  if (config.rootDir == null) {
22
23
  throw new Error('rootDir is not set and it should be set by stencil itself');
23
24
  }
package/dist/types.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  * The type of output that can be generated with the Angular output target.
3
3
  * - `component` - Generate many component wrappers tied to a single Angular module (lazy/hydrated approach).
4
4
  * - `scam` - Generate a Single Component Angular Module for each component.
5
- * - `standalone` - Generate a component with the `standalone` flag set to `true`.
5
+ * - `standalone` - Generates standalone components.
6
6
  */
7
7
  export type OutputType = 'component' | 'scam' | 'standalone';
8
8
  export interface OutputTargetAngular {
@@ -24,7 +24,7 @@ export interface OutputTargetAngular {
24
24
  * The type of output that should be generated.
25
25
  * - `component` - Generate many component wrappers tied to a single Angular module (lazy/hydrated approach).
26
26
  * - `scam` - Generate a Single Component Angular Module for each component.
27
- * - `standalone` - Generate a component with the `standalone` flag set to `true`.
27
+ * - `standalone` - (default) Generates standalone components.
28
28
  */
29
29
  outputType?: OutputType;
30
30
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stencil/angular-output-target",
3
- "version": "0.10.2",
3
+ "version": "1.0.0",
4
4
  "description": "Angular output target for @stencil/core components.",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
@@ -39,17 +39,18 @@
39
39
  },
40
40
  "repository": {
41
41
  "type": "git",
42
- "url": "git+https://github.com/ionic-team/stencil-ds-output-targets.git"
42
+ "url": "git+https://github.com/stenciljs/output-targets.git"
43
43
  },
44
44
  "author": "Ionic Team",
45
45
  "homepage": "https://stenciljs.com/",
46
46
  "license": "MIT",
47
47
  "bugs": {
48
- "url": "https://github.com/ionic-team/stencil-ds-output-targets/issues"
48
+ "url": "https://github.com/stenciljs/output-targets/issues"
49
49
  },
50
50
  "devDependencies": {
51
51
  "@angular/core": "8.2.14",
52
52
  "@angular/forms": "8.2.14",
53
+ "@stencil/core": "4.32.0",
53
54
  "@types/node": "^18.0.0",
54
55
  "npm-run-all2": "^6.2.4",
55
56
  "rimraf": "^5.0.0",
package/resources/control-value-accessors/boolean-value-accessor.ts CHANGED
@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor';
7
7
  /* tslint:disable-next-line:directive-selector */
8
8
  selector: '<VALUE_ACCESSOR_SELECTORS>',
9
9
  host: {
10
- '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
10
+ '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target?.["<VALUE_ACCESSOR_TARGETATTR>"])'
11
11
  },
12
12
  providers: [
13
13
  {
package/resources/control-value-accessors/number-value-accessor.ts CHANGED
@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor';
7
7
  /* tslint:disable-next-line:directive-selector */
8
8
  selector: '<VALUE_ACCESSOR_SELECTORS>',
9
9
  host: {
10
- '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
10
+ '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target?.["<VALUE_ACCESSOR_TARGETATTR>"])'
11
11
  },
12
12
  providers: [
13
13
  {
package/resources/control-value-accessors/radio-value-accessor.ts CHANGED
@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor';
7
7
  /* tslint:disable-next-line:directive-selector */
8
8
  selector: '<VALUE_ACCESSOR_SELECTORS>',
9
9
  host: {
10
- '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
10
+ '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target?.["<VALUE_ACCESSOR_TARGETATTR>"])'
11
11
  },
12
12
  providers: [
13
13
  {
package/resources/control-value-accessors/select-value-accessor.ts CHANGED
@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor';
7
7
  /* tslint:disable-next-line:directive-selector */
8
8
  selector: '<VALUE_ACCESSOR_SELECTORS>',
9
9
  host: {
10
- '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
10
+ '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target?.["<VALUE_ACCESSOR_TARGETATTR>"])'
11
11
  },
12
12
  providers: [
13
13
  {
package/resources/control-value-accessors/text-value-accessor.ts CHANGED
@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor';
7
7
  /* tslint:disable-next-line:directive-selector */
8
8
  selector: '<VALUE_ACCESSOR_SELECTORS>',
9
9
  host: {
10
- '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
10
+ '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target?.["<VALUE_ACCESSOR_TARGETATTR>"])'
11
11
  },
12
12
  providers: [
13
13
  {