diff --git a/packages/@lwc/compiler/src/index.ts b/packages/@lwc/compiler/src/index.ts index 52ecd018b0..bfdeaca6c3 100755 --- a/packages/@lwc/compiler/src/index.ts +++ b/packages/@lwc/compiler/src/index.ts @@ -11,7 +11,7 @@ export { TransformOptions, StylesheetConfig, CustomPropertiesResolution, - DynamicComponentConfig, + DynamicImportConfig, OutputConfig, } from './options'; diff --git a/packages/@lwc/compiler/src/options.ts b/packages/@lwc/compiler/src/options.ts index 0a5b474bc1..b13569e556 100755 --- a/packages/@lwc/compiler/src/options.ts +++ b/packages/@lwc/compiler/src/options.ts @@ -19,7 +19,7 @@ const DEFAULT_OPTIONS = { disableSyntheticShadowSupport: false, }; -const DEFAULT_DYNAMIC_CMP_CONFIG: Required = { +const DEFAULT_DYNAMIC_IMPORT_CONFIG: Required = { loader: '', strictSpecifier: true, }; @@ -56,7 +56,7 @@ export interface OutputConfig { minify?: boolean; } -export interface DynamicComponentConfig { +export interface DynamicImportConfig { loader?: string; strictSpecifier?: boolean; } @@ -65,7 +65,13 @@ export interface TransformOptions { name?: string; namespace?: string; stylesheetConfig?: StylesheetConfig; - experimentalDynamicComponent?: DynamicComponentConfig; + // TODO [#3331]: deprecate / rename this compiler option in 246 + /* Config applied in usage of dynamic import statements in javascript */ + experimentalDynamicComponent?: DynamicImportConfig; + /* Flag to enable usage of dynamic component(lwc:dynamic) directive in HTML template */ + experimentalDynamicDirective?: boolean; + /* Flag to enable usage of dynamic component(lwc:is) directive in HTML template */ + enableDynamicComponents?: boolean; outputConfig?: OutputConfig; isExplicitImport?: boolean; preserveHtmlComments?: boolean; @@ -85,6 +91,9 @@ type RequiredTransformOptions = Omit< | 'customRendererConfig' | 'enableLwcSpread' | 'enableScopedSlots' + | 'enableDynamicComponents' + | 'experimentalDynamicDirective' + | 'experimentalDynamicComponent' >; export interface NormalizedTransformOptions extends RecursiveRequired { name?: string; @@ -93,6 +102,9 @@ export interface NormalizedTransformOptions extends RecursiveRequired = { - ...DEFAULT_DYNAMIC_CMP_CONFIG, + const experimentalDynamicComponent: Required = { + ...DEFAULT_DYNAMIC_IMPORT_CONFIG, ...options.experimentalDynamicComponent, }; diff --git a/packages/@lwc/compiler/src/transformers/__tests__/transform-html.spec.ts b/packages/@lwc/compiler/src/transformers/__tests__/transform-html.spec.ts index ba547d1ac6..f5502e477b 100644 --- a/packages/@lwc/compiler/src/transformers/__tests__/transform-html.spec.ts +++ b/packages/@lwc/compiler/src/transformers/__tests__/transform-html.spec.ts @@ -123,4 +123,69 @@ describe('transformSync', () => { expect(warnings).toHaveLength(0); expect(code).not.toMatch('renderer: renderer'); }); + + describe('dynamic components', () => { + it('should allow dynamic components when enableDynamicComponents is set to true', () => { + const template = ` + + `; + const { code, warnings } = transformSync(template, 'foo.html', { + enableDynamicComponents: true, + ...TRANSFORMATION_OPTIONS, + }); + + expect(warnings).toHaveLength(0); + expect(code).toContain('api_dynamic_component'); + }); + + it('should not allow dynamic components when enableDynamicComponents is set to false', () => { + const template = ` + + `; + expect(() => + transformSync(template, 'foo.html', { + enableDynamicComponents: false, + ...TRANSFORMATION_OPTIONS, + }) + ).toThrow('LWC1188: Invalid dynamic components usage'); + }); + + it('should allow deprecated dynamic components when experimentalDynamicDirective is set to true', () => { + const template = ` + + `; + const { code, warnings } = transformSync(template, 'foo.html', { + experimentalDynamicDirective: true, + ...TRANSFORMATION_OPTIONS, + }); + + expect(warnings).toHaveLength(1); + expect(warnings?.[0]).toMatchObject({ + message: expect.stringContaining('lwc:dynamic directive is deprecated'), + }); + expect(code).toContain('api_deprecated_dynamic_component'); + }); + + it('should not allow dynamic components when experimentalDynamicDirective is set to false', () => { + const template = ` + + `; + expect(() => + transformSync(template, 'foo.html', { + experimentalDynamicDirective: false, + ...TRANSFORMATION_OPTIONS, + }) + ).toThrowErrorMatchingInlineSnapshot( + '"LWC1128: Invalid lwc:dynamic usage. The LWC dynamic directive must be enabled in order to use this feature."' + ); + }); + }); }); diff --git a/packages/@lwc/compiler/src/transformers/javascript.ts b/packages/@lwc/compiler/src/transformers/javascript.ts index 0bf0d99c71..396b1c4553 100755 --- a/packages/@lwc/compiler/src/transformers/javascript.ts +++ b/packages/@lwc/compiler/src/transformers/javascript.ts @@ -36,7 +36,7 @@ export default function scriptTransform( babelrc: false, configFile: false, - // Force Babel to generate new line and whitespaces. This prevent Babel from generating + // Force Babel to generate new line and white spaces. This prevent Babel from generating // an error when the generated code is over 500KB. compact: false, diff --git a/packages/@lwc/compiler/src/transformers/template.ts b/packages/@lwc/compiler/src/transformers/template.ts index cc30674a6a..7a39c76f8f 100755 --- a/packages/@lwc/compiler/src/transformers/template.ts +++ b/packages/@lwc/compiler/src/transformers/template.ts @@ -34,8 +34,11 @@ export default function templateTransform( customRendererConfig, enableLwcSpread, enableScopedSlots, + enableDynamicComponents, + experimentalDynamicDirective: deprecatedDynamicDirective, } = options; - const experimentalDynamicDirective = Boolean(experimentalDynamicComponent); + const experimentalDynamicDirective = + deprecatedDynamicDirective ?? Boolean(experimentalDynamicComponent); let result; try { @@ -46,6 +49,7 @@ export default function templateTransform( customRendererConfig, enableLwcSpread, enableScopedSlots, + enableDynamicComponents, }); } catch (e) { throw normalizeToCompilerError(TransformerErrors.HTML_TRANSFORMER_ERROR, e, { filename }); diff --git a/packages/@lwc/engine-core/src/framework/api.ts b/packages/@lwc/engine-core/src/framework/api.ts index 02077f8122..12ee09ac58 100644 --- a/packages/@lwc/engine-core/src/framework/api.ts +++ b/packages/@lwc/engine-core/src/framework/api.ts @@ -533,9 +533,11 @@ function fid(url: string | undefined | null): string | null | undefined { } /** - * create a dynamic component via `` + * [ddc] - create a (deprecated) dynamic component via `` + * + * TODO [#3331]: remove usage of lwc:dynamic in 246 */ -function dc( +function ddc( sel: string, Ctor: LightningElementConstructor | null | undefined, data: VElementData, @@ -550,7 +552,7 @@ function dc( ); } // null or undefined values should produce a null value in the VNodes - if (Ctor == null) { + if (isNull(Ctor) || isUndefined(Ctor)) { return null; } if (!isComponentConstructor(Ctor)) { @@ -560,6 +562,35 @@ function dc( return c(sel, Ctor, data, children); } +/** + * [dc] - create a dynamic component via `` + */ +function dc( + Ctor: LightningElementConstructor | null | undefined, + data: VElementData, + children: VNodes = EmptyArray +): VCustomElement | null { + if (process.env.NODE_ENV !== 'production') { + assert.isTrue(isObject(data), `dc() 2nd argument data must be an object.`); + assert.isTrue( + arguments.length === 3 || isArray(children), + `dc() 3rd argument data must be an array.` + ); + } + // null or undefined values should produce a null value in the VNodes + if (isNull(Ctor) || isUndefined(Ctor)) { + return null; + } + + if (!isComponentConstructor(Ctor)) { + throw new Error( + `Invalid constructor ${toString(Ctor)} is not a LightningElement constructor.` + ); + } + + return null; +} + /** * slow children collection marking mechanism. this API allows the compiler to signal * to the engine that a particular collection of children must be diffed using the slow @@ -628,6 +659,7 @@ const api = ObjectFreeze({ fid, shc, ssf, + ddc, }); export default api; diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures.spec.ts b/packages/@lwc/engine-server/src/__tests__/fixtures.spec.ts index 307ebb7158..316eb241f0 100755 --- a/packages/@lwc/engine-server/src/__tests__/fixtures.spec.ts +++ b/packages/@lwc/engine-server/src/__tests__/fixtures.spec.ts @@ -8,7 +8,7 @@ import fs from 'fs'; import path from 'path'; -import { rollup } from 'rollup'; +import { rollup, RollupWarning } from 'rollup'; // @ts-ignore import lwcRollupPlugin from '@lwc/rollup-plugin'; import { isVoidElement, HTML_NAMESPACE } from '@lwc/shared'; @@ -29,6 +29,8 @@ jest.setTimeout(10_000 /* 10 seconds */); async function compileFixture({ input, dirname }: { input: string; dirname: string }) { const modulesDir = path.resolve(dirname, './modules'); const outputFile = path.resolve(dirname, './dist/compiled.js'); + // TODO [#3331]: this is only needed to silence warnings on lwc:dynamic, remove in 246. + const warnings: RollupWarning[] = []; const bundle = await rollup({ input, @@ -43,6 +45,9 @@ async function compileFixture({ input, dirname }: { input: string; dirname: stri ], }), ], + onwarn(warning) { + warnings.push(warning); + }, }); await bundle.write({ diff --git a/packages/@lwc/errors/src/compiler/error-info/index.ts b/packages/@lwc/errors/src/compiler/error-info/index.ts index 64deafd7b5..54e934f5e2 100644 --- a/packages/@lwc/errors/src/compiler/error-info/index.ts +++ b/packages/@lwc/errors/src/compiler/error-info/index.ts @@ -5,7 +5,7 @@ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT */ /** - * Next error code: 1183 + * Next error code: 1189 */ export * from './compiler'; diff --git a/packages/@lwc/errors/src/compiler/error-info/template-transform.ts b/packages/@lwc/errors/src/compiler/error-info/template-transform.ts index f8efbcaa1e..5643ff9bf2 100644 --- a/packages/@lwc/errors/src/compiler/error-info/template-transform.ts +++ b/packages/@lwc/errors/src/compiler/error-info/template-transform.ts @@ -471,7 +471,7 @@ export const ParserDiagnostics = { INVALID_OPTS_LWC_DYNAMIC: { code: 1128, message: - 'Invalid lwc:dynamic usage. The LWC dynamic Directive must be enabled in order to use this feature.', + 'Invalid lwc:dynamic usage. The LWC dynamic directive must be enabled in order to use this feature.', level: DiagnosticLevel.Error, url: '', }, @@ -548,7 +548,7 @@ export const ParserDiagnostics = { LWC_INNER_HTML_INVALID_CUSTOM_ELEMENT: { code: 1140, message: - 'Invalid lwc:inner-html usage on element "{0}". The directive can\'t be used on a custom element.', + 'Invalid lwc:inner-html usage on element "{0}". The directive can\'t be used on a custom element or special LWC managed elements denoted with lwc:*.', level: DiagnosticLevel.Error, url: '', }, @@ -846,4 +846,49 @@ export const ParserDiagnostics = { level: DiagnosticLevel.Warning, url: '', }, + + LWC_COMPONENT_TAG_WITHOUT_IS_DIRECTIVE: { + code: 1183, + message: ` must have an 'lwc:is' attribute.`, + level: DiagnosticLevel.Error, + url: '', + }, + + UNSUPPORTED_LWC_TAG_NAME: { + code: 1184, + message: '{0} is not a special LWC tag name and will be treated as an HTML element.', + level: DiagnosticLevel.Warning, + url: '', + }, + + INVALID_LWC_IS_DIRECTIVE_VALUE: { + code: 1185, + message: + 'Invalid lwc:is usage for value {0}. The value assigned to lwc:is must be an expression.', + level: DiagnosticLevel.Error, + url: '', + }, + + LWC_IS_INVALID_ELEMENT: { + code: 1186, + message: + 'Invalid lwc:is usage for element {0}. The directive can only be used with ', + level: DiagnosticLevel.Error, + url: '', + }, + + DEPRECATED_LWC_DYNAMIC_ATTRIBUTE: { + code: 1187, + message: `The lwc:dynamic directive is deprecated and will be removed in a future release. Please use lwc:is instead.`, + level: DiagnosticLevel.Warning, + url: '', + }, + + INVALID_OPTS_LWC_ENABLE_DYNAMIC_COMPONENTS: { + code: 1188, + message: + 'Invalid dynamic components usage, lwc:component and lwc:is can only be used when dynamic components have been enabled.', + level: DiagnosticLevel.Error, + url: '', + }, }; diff --git a/packages/@lwc/rollup-plugin/README.md b/packages/@lwc/rollup-plugin/README.md index 7de13bf6a8..3cf8a61173 100644 --- a/packages/@lwc/rollup-plugin/README.md +++ b/packages/@lwc/rollup-plugin/README.md @@ -29,7 +29,9 @@ export default { - `modules` (type: `ModuleRecord[]`, default: `[]`) - The [module resolution](https://lwc.dev/guide/es_modules#module-resolution) overrides passed to the `@lwc/module-resolver`. - `stylesheetConfig` (type: `object`, default: `{}`) - The stylesheet compiler configuration to pass to the `@lwc/style-compiler`. - `preserveHtmlComments` (type: `boolean`, default: `false`) - The configuration to pass to the `@lwc/template-compiler`. -- `experimentalDynamicComponent` (type: `DynamicComponentConfig`, default: `null`) - The configuration to pass to `@lwc/compiler`. +- `experimentalDynamicComponent` (type: `DynamicImportConfig`, default: `null`) - The configuration to pass to `@lwc/compiler`. +- `experimentalDynamicDirective` (type: `boolean`, default: `false`) - The configuration to pass to `@lwc/template-compiler` to enable deprecated dynamic components. +- `enableDynamicComponents` (type: `boolean`, default: `false`) - The configuration to pass to `@lwc/template-compiler` to enable dynamic components. - `enableLwcSpread` (type: `boolean`, default: `false`) - The configuration to pass to the `@lwc/template-compiler`. - `enableScopedSlots` (type: `boolean`, default: `false`) - The configuration to pass to `@lwc/template-compiler` to enable scoped slots feature. - `disableSyntheticShadowSupport` (type: `boolean`, default: `false`) - Set to true if synthetic shadow DOM support is not needed, which can result in smaller output. diff --git a/packages/@lwc/rollup-plugin/src/__tests__/compilerConfig/compilerConfig.spec.ts b/packages/@lwc/rollup-plugin/src/__tests__/compilerConfig/compilerConfig.spec.ts index a0ea941591..3159d0653e 100644 --- a/packages/@lwc/rollup-plugin/src/__tests__/compilerConfig/compilerConfig.spec.ts +++ b/packages/@lwc/rollup-plugin/src/__tests__/compilerConfig/compilerConfig.spec.ts @@ -5,7 +5,7 @@ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT */ import path from 'path'; -import { rollup } from 'rollup'; +import { rollup, RollupWarning } from 'rollup'; import lwc from '../../index'; @@ -74,4 +74,67 @@ describe('templateConfig', () => { // for `disableSyntheticShadowSupport: true` by serialize.ts in @lwc/style-compiler expect(output[0].code).toContain('function stylesheet()'); }); + + it('should accept enableDynamicComponents config flag', async () => { + const bundle = await rollup({ + input: path.resolve(__dirname, 'fixtures/dynamicComponent/dynamicComponent.js'), + plugins: [ + lwc({ + enableDynamicComponents: true, + }), + ], + }); + + const { output } = await bundle.generate({ + format: 'esm', + }); + + expect(output[0].code).toContain('api_dynamic_component'); + }); + + it('should accept experimentalDynamicDirective config flag', async () => { + const warnings: RollupWarning[] = []; + const bundle = await rollup({ + input: path.resolve(__dirname, 'fixtures/experimentalDynamic/experimentalDynamic.js'), + plugins: [ + lwc({ + experimentalDynamicDirective: true, + }), + ], + onwarn(warning) { + warnings.push(warning); + }, + }); + + const { output } = await bundle.generate({ + format: 'esm', + }); + + expect(warnings).toHaveLength(1); + expect(warnings?.[0]?.message).toContain( + 'LWC1187: The lwc:dynamic directive is deprecated' + ); + expect(output[0].code).toContain('api_deprecated_dynamic_component'); + }); +}); + +describe('javaScriptConfig', () => { + it('should accept experimentalDynamicComponent config flag', async () => { + const CUSTOM_LOADER = '@salesforce/loader'; + const bundle = await rollup({ + input: path.resolve(__dirname, 'fixtures/dynamicImportConfig/dynamicImportConfig.js'), + plugins: [ + lwc({ + experimentalDynamicComponent: { loader: CUSTOM_LOADER, strictSpecifier: true }, + }), + ], + external: [CUSTOM_LOADER], + }); + + const { output } = await bundle.generate({ + format: 'esm', + }); + + expect(output[0].imports).toContain(CUSTOM_LOADER); + }); }); diff --git a/packages/@lwc/rollup-plugin/src/__tests__/compilerConfig/fixtures/dynamicComponent/dynamicComponent.html b/packages/@lwc/rollup-plugin/src/__tests__/compilerConfig/fixtures/dynamicComponent/dynamicComponent.html new file mode 100644 index 0000000000..c0259e774b --- /dev/null +++ b/packages/@lwc/rollup-plugin/src/__tests__/compilerConfig/fixtures/dynamicComponent/dynamicComponent.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/packages/@lwc/rollup-plugin/src/__tests__/compilerConfig/fixtures/dynamicComponent/dynamicComponent.js b/packages/@lwc/rollup-plugin/src/__tests__/compilerConfig/fixtures/dynamicComponent/dynamicComponent.js new file mode 100644 index 0000000000..e79fa43e93 --- /dev/null +++ b/packages/@lwc/rollup-plugin/src/__tests__/compilerConfig/fixtures/dynamicComponent/dynamicComponent.js @@ -0,0 +1,5 @@ +import { LightningElement } from 'lwc'; + +export default class extends LightningElement { + ctor; +} \ No newline at end of file diff --git a/packages/@lwc/rollup-plugin/src/__tests__/compilerConfig/fixtures/dynamicImportConfig/dynamicImportConfig.html b/packages/@lwc/rollup-plugin/src/__tests__/compilerConfig/fixtures/dynamicImportConfig/dynamicImportConfig.html new file mode 100644 index 0000000000..0122c3ae5d --- /dev/null +++ b/packages/@lwc/rollup-plugin/src/__tests__/compilerConfig/fixtures/dynamicImportConfig/dynamicImportConfig.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/packages/@lwc/rollup-plugin/src/__tests__/compilerConfig/fixtures/dynamicImportConfig/dynamicImportConfig.js b/packages/@lwc/rollup-plugin/src/__tests__/compilerConfig/fixtures/dynamicImportConfig/dynamicImportConfig.js new file mode 100644 index 0000000000..2ad16bb419 --- /dev/null +++ b/packages/@lwc/rollup-plugin/src/__tests__/compilerConfig/fixtures/dynamicImportConfig/dynamicImportConfig.js @@ -0,0 +1,10 @@ +import { LightningElement } from 'lwc'; + +export default class extends LightningElement { + lazyCtor; + + async connectedCallback() { + const { default: ctor } = await import('test'); + this.lazyCtor = ctor; + } +} \ No newline at end of file diff --git a/packages/@lwc/rollup-plugin/src/__tests__/compilerConfig/fixtures/experimentalDynamic/experimentalDynamic.html b/packages/@lwc/rollup-plugin/src/__tests__/compilerConfig/fixtures/experimentalDynamic/experimentalDynamic.html new file mode 100644 index 0000000000..deebb0bce3 --- /dev/null +++ b/packages/@lwc/rollup-plugin/src/__tests__/compilerConfig/fixtures/experimentalDynamic/experimentalDynamic.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/packages/@lwc/rollup-plugin/src/__tests__/compilerConfig/fixtures/experimentalDynamic/experimentalDynamic.js b/packages/@lwc/rollup-plugin/src/__tests__/compilerConfig/fixtures/experimentalDynamic/experimentalDynamic.js new file mode 100644 index 0000000000..e79fa43e93 --- /dev/null +++ b/packages/@lwc/rollup-plugin/src/__tests__/compilerConfig/fixtures/experimentalDynamic/experimentalDynamic.js @@ -0,0 +1,5 @@ +import { LightningElement } from 'lwc'; + +export default class extends LightningElement { + ctor; +} \ No newline at end of file diff --git a/packages/@lwc/rollup-plugin/src/index.ts b/packages/@lwc/rollup-plugin/src/index.ts index 2a5a4d1a67..7e2b726152 100644 --- a/packages/@lwc/rollup-plugin/src/index.ts +++ b/packages/@lwc/rollup-plugin/src/index.ts @@ -10,7 +10,7 @@ import { URLSearchParams } from 'url'; import { Plugin, SourceMapInput, RollupWarning } from 'rollup'; import pluginUtils, { FilterPattern } from '@rollup/pluginutils'; -import { transformSync, StylesheetConfig, DynamicComponentConfig } from '@lwc/compiler'; +import { transformSync, StylesheetConfig, DynamicImportConfig } from '@lwc/compiler'; import { resolveModule, ModuleRecord } from '@lwc/module-resolver'; import type { CompilerDiagnostic } from '@lwc/errors'; @@ -30,7 +30,11 @@ export interface RollupLwcOptions { /** The configuration to pass to the `@lwc/template-compiler`. */ preserveHtmlComments?: boolean; /** The configuration to pass to `@lwc/compiler`. */ - experimentalDynamicComponent?: DynamicComponentConfig; + experimentalDynamicComponent?: DynamicImportConfig; + /** The configuration to pass to `@lwc/template-compiler`. */ + experimentalDynamicDirective?: boolean; + /** The configuration to pass to `@lwc/template-compiler`. */ + enableDynamicComponents?: boolean; /** The configuration to pass to the `@lwc/template-compiler`. */ enableLwcSpread?: boolean; /** The configuration to pass to `@lwc/template-compiler` to enable scoped slots feature.*/ @@ -131,6 +135,8 @@ export default function lwc(pluginOptions: RollupLwcOptions = {}): Plugin { sourcemap = false, preserveHtmlComments, experimentalDynamicComponent, + experimentalDynamicDirective, + enableDynamicComponents, enableLwcSpread, enableScopedSlots, disableSyntheticShadowSupport, @@ -252,6 +258,8 @@ export default function lwc(pluginOptions: RollupLwcOptions = {}): Plugin { outputConfig: { sourcemap }, stylesheetConfig, experimentalDynamicComponent, + experimentalDynamicDirective, + enableDynamicComponents, preserveHtmlComments, scopedStyles: scoped, enableLwcSpread, diff --git a/packages/@lwc/template-compiler/README.md b/packages/@lwc/template-compiler/README.md index a6bb3a119b..d630c5c07a 100644 --- a/packages/@lwc/template-compiler/README.md +++ b/packages/@lwc/template-compiler/README.md @@ -50,6 +50,7 @@ const { code, warnings } = compile(``, - `experimentalComputedMemberExpression` (boolean, optional, `false` by default) - set to `true` to enable computed member expression in the template, eg: `{list[0].name}`. - `experimentalDynamicDirective` (boolean, optional, `false` by default) - set to `true` to allow the usage of `lwc:dynamic` directives in the template. +- `enableDynamicComponents` (boolean, optional, `false` by default) - set to `true` to enable `lwc:is` directive in the template. - `preserveHtmlComments` (boolean, optional, `false` by default) - set to `true` to disable the default behavior of stripping HTML comments. - `enableStaticContentOptimization` (boolean, optional, `true` by default) - set to `false` to disable static content optimizations. - `enableLwcSpread` (boolean, optional, `false` by default) - set to `true` to enable `lwc:spread` directive in the template. diff --git a/packages/@lwc/template-compiler/src/__tests__/config.spec.ts b/packages/@lwc/template-compiler/src/__tests__/config.spec.ts index 185e36e443..b87c884138 100644 --- a/packages/@lwc/template-compiler/src/__tests__/config.spec.ts +++ b/packages/@lwc/template-compiler/src/__tests__/config.spec.ts @@ -43,6 +43,7 @@ describe('customRendererConfig normalization', () => { }, ], }, + "enableDynamicComponents": false, "enableLwcSpread": false, "enableScopedSlots": false, "enableStaticContentOptimization": true, diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/invalid-config/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/invalid-config/metadata.json index 8f4bf6131a..3aa9a6aedb 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/invalid-config/metadata.json +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/invalid-config/metadata.json @@ -2,7 +2,7 @@ "warnings": [ { "code": 1128, - "message": "LWC1128: Invalid lwc:dynamic usage. The LWC dynamic Directive must be enabled in order to use this feature.", + "message": "LWC1128: Invalid lwc:dynamic usage. The LWC dynamic directive must be enabled in order to use this feature.", "level": 1, "location": { "line": 2, diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/only-child/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/only-child/expected.js index ce9d2b4531..21b418d69c 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/only-child/expected.js +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/only-child/expected.js @@ -3,8 +3,10 @@ const stc0 = { key: 0, }; function tmpl($api, $cmp, $slotset, $ctx) { - const { dc: api_dynamic_component } = $api; - return [api_dynamic_component("x-foo", $cmp.trackedProp.foo, stc0)]; + const { ddc: api_deprecated_dynamic_component } = $api; + return [ + api_deprecated_dynamic_component("x-foo", $cmp.trackedProp.foo, stc0), + ]; /*LWC compiler vX.X.X*/ } export default registerTemplate(tmpl); diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/only-child/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/only-child/metadata.json index 51ec5f799c..8f5fb951aa 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/only-child/metadata.json +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/only-child/metadata.json @@ -1,3 +1,15 @@ { - "warnings": [] + "warnings": [ + { + "code": 1187, + "message": "LWC1187: The lwc:dynamic directive is deprecated and will be removed in a future release. Please use lwc:is instead.", + "level": 2, + "location": { + "line": 2, + "column": 5, + "start": 15, + "length": 45 + } + } + ] } \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/sibbling/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/sibbling/expected.js index af737fc6ee..ec6fc28caf 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/sibbling/expected.js +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/sibbling/expected.js @@ -5,10 +5,11 @@ const stc0 = { key: 2, }; function tmpl($api, $cmp, $slotset, $ctx) { - const { st: api_static_fragment, dc: api_dynamic_component } = $api; + const { st: api_static_fragment, ddc: api_deprecated_dynamic_component } = + $api; return [ api_static_fragment($fragment1(), 1), - api_dynamic_component("x-foo", $cmp.trackedProp.foo, stc0), + api_deprecated_dynamic_component("x-foo", $cmp.trackedProp.foo, stc0), api_static_fragment($fragment2(), 4), ]; /*LWC compiler vX.X.X*/ diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/sibbling/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/sibbling/metadata.json index 51ec5f799c..9075f120c2 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/sibbling/metadata.json +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/sibbling/metadata.json @@ -1,3 +1,15 @@ { - "warnings": [] + "warnings": [ + { + "code": 1187, + "message": "LWC1187: The lwc:dynamic directive is deprecated and will be removed in a future release. Please use lwc:is instead.", + "level": 2, + "location": { + "line": 3, + "column": 5, + "start": 37, + "length": 45 + } + } + ] } \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-external/dynamic-components/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-external/dynamic-components/actual.html new file mode 100644 index 0000000000..b6137d5d2f --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-external/dynamic-components/actual.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-external/dynamic-components/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-external/dynamic-components/ast.json new file mode 100644 index 0000000000..9e26dfeeb6 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-external/dynamic-components/ast.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-external/dynamic-components/config.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-external/dynamic-components/config.json new file mode 100644 index 0000000000..e3593b237f --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-external/dynamic-components/config.json @@ -0,0 +1,3 @@ +{ + "enableDynamicComponents": true +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-external/dynamic-components/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-external/dynamic-components/expected.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-external/dynamic-components/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-external/dynamic-components/metadata.json new file mode 100644 index 0000000000..c22cd055bd --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-external/dynamic-components/metadata.json @@ -0,0 +1,15 @@ +{ + "warnings": [ + { + "code": 1180, + "message": "LWC1180: Invalid lwc:external directive usage: . This directive can only be used on custom elements.", + "level": 1, + "location": { + "line": 2, + "column": 5, + "start": 15, + "length": 58 + } + } + ] +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/dynamic-component/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/dynamic-component/actual.html new file mode 100644 index 0000000000..c5b3cd197f --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/dynamic-component/actual.html @@ -0,0 +1,5 @@ + diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/dynamic-component/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/dynamic-component/ast.json new file mode 100644 index 0000000000..d126ee4e5c --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/dynamic-component/ast.json @@ -0,0 +1,241 @@ +{ + "root": { + "type": "Root", + "location": { + "startLine": 1, + "startColumn": 1, + "endLine": 5, + "endColumn": 12, + "start": 0, + "end": 146, + "startTag": { + "startLine": 1, + "startColumn": 1, + "endLine": 1, + "endColumn": 11, + "start": 0, + "end": 10 + }, + "endTag": { + "startLine": 5, + "startColumn": 1, + "endLine": 5, + "endColumn": 12, + "start": 135, + "end": 146 + } + }, + "directives": [], + "children": [ + { + "type": "ForEach", + "expression": { + "type": "Identifier", + "start": 1, + "end": 6, + "name": "items", + "location": { + "startLine": 2, + "startColumn": 34, + "endLine": 2, + "endColumn": 50, + "start": 44, + "end": 60 + } + }, + "item": { + "type": "Identifier", + "name": "item", + "location": { + "startLine": 2, + "startColumn": 65, + "endLine": 2, + "endColumn": 80, + "start": 75, + "end": 90 + } + }, + "location": { + "startLine": 2, + "startColumn": 5, + "endLine": 4, + "endColumn": 21, + "start": 15, + "end": 134 + }, + "directiveLocation": { + "startLine": 2, + "startColumn": 34, + "endLine": 2, + "endColumn": 50, + "start": 44, + "end": 60 + }, + "children": [ + { + "type": "Lwc", + "name": "lwc:component", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 2, + "startColumn": 5, + "endLine": 4, + "endColumn": 21, + "start": 15, + "end": 134, + "startTag": { + "startLine": 2, + "startColumn": 5, + "endLine": 2, + "endColumn": 81, + "start": 15, + "end": 91 + }, + "endTag": { + "startLine": 4, + "startColumn": 5, + "endLine": 4, + "endColumn": 21, + "start": 118, + "end": 134 + } + }, + "attributes": [], + "properties": [], + "directives": [ + { + "type": "Directive", + "name": "Key", + "value": { + "type": "MemberExpression", + "start": 1, + "end": 8, + "object": { + "type": "Identifier", + "start": 1, + "end": 5, + "name": "item" + }, + "property": { + "type": "Identifier", + "start": 6, + "end": 8, + "name": "id" + }, + "computed": false, + "optional": false, + "location": { + "startLine": 2, + "startColumn": 51, + "endLine": 2, + "endColumn": 64, + "start": 61, + "end": 74 + } + }, + "location": { + "startLine": 2, + "startColumn": 51, + "endLine": 2, + "endColumn": 64, + "start": 61, + "end": 74 + } + }, + { + "type": "Directive", + "name": "Is", + "value": { + "type": "Identifier", + "start": 1, + "end": 5, + "name": "ctor", + "location": { + "startLine": 2, + "startColumn": 20, + "endLine": 2, + "endColumn": 33, + "start": 30, + "end": 43 + } + }, + "location": { + "startLine": 2, + "startColumn": 20, + "endLine": 2, + "endColumn": 33, + "start": 30, + "end": 43 + } + } + ], + "listeners": [], + "children": [ + { + "type": "Element", + "name": "p", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 3, + "startColumn": 9, + "endLine": 3, + "endColumn": 22, + "start": 100, + "end": 113, + "startTag": { + "startLine": 3, + "startColumn": 9, + "endLine": 3, + "endColumn": 12, + "start": 100, + "end": 103 + }, + "endTag": { + "startLine": 3, + "startColumn": 18, + "endLine": 3, + "endColumn": 22, + "start": 109, + "end": 113 + } + }, + "attributes": [], + "properties": [], + "directives": [], + "listeners": [], + "children": [ + { + "type": "Text", + "raw": "{item}", + "value": { + "type": "Identifier", + "start": 1, + "end": 5, + "name": "item", + "location": { + "startLine": 3, + "startColumn": 12, + "endLine": 3, + "endColumn": 18, + "start": 103, + "end": 109 + } + }, + "location": { + "startLine": 3, + "startColumn": 12, + "endLine": 3, + "endColumn": 18, + "start": 103, + "end": 109 + } + } + ] + } + ] + } + ] + } + ] + } +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/dynamic-component/config.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/dynamic-component/config.json new file mode 100644 index 0000000000..e3593b237f --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/dynamic-component/config.json @@ -0,0 +1,3 @@ +{ + "enableDynamicComponents": true +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/dynamic-component/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/dynamic-component/expected.js new file mode 100644 index 0000000000..64be0a3ade --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/dynamic-component/expected.js @@ -0,0 +1,26 @@ +import { registerTemplate } from "lwc"; +const stc0 = { + key: 1, +}; +function tmpl($api, $cmp, $slotset, $ctx) { + const { + k: api_key, + d: api_dynamic_text, + t: api_text, + h: api_element, + dc: api_dynamic_component, + i: api_iterator, + } = $api; + return api_iterator($cmp.items, function (item) { + return api_dynamic_component( + $cmp.ctor, + { + key: api_key(0, item.id), + }, + [api_element("p", stc0, [api_text(api_dynamic_text(item))])] + ); + }); + /*LWC compiler vX.X.X*/ +} +export default registerTemplate(tmpl); +tmpl.stylesheets = []; diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/dynamic-component/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/dynamic-component/metadata.json new file mode 100644 index 0000000000..51ec5f799c --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/dynamic-component/metadata.json @@ -0,0 +1,3 @@ +{ + "warnings": [] +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/actual.html new file mode 100644 index 0000000000..4ef572f2f1 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/actual.html @@ -0,0 +1,8 @@ + diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/ast.json new file mode 100644 index 0000000000..b666affc89 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/ast.json @@ -0,0 +1,330 @@ +{ + "root": { + "type": "Root", + "location": { + "startLine": 1, + "startColumn": 1, + "endLine": 8, + "endColumn": 12, + "start": 0, + "end": 202, + "startTag": { + "startLine": 1, + "startColumn": 1, + "endLine": 1, + "endColumn": 11, + "start": 0, + "end": 10 + }, + "endTag": { + "startLine": 8, + "startColumn": 1, + "endLine": 8, + "endColumn": 12, + "start": 191, + "end": 202 + } + }, + "directives": [], + "children": [ + { + "type": "If", + "modifier": "true", + "condition": { + "type": "Identifier", + "start": 1, + "end": 7, + "name": "isTrue", + "location": { + "startLine": 2, + "startColumn": 34, + "endLine": 2, + "endColumn": 50, + "start": 44, + "end": 60 + } + }, + "location": { + "startLine": 2, + "startColumn": 5, + "endLine": 4, + "endColumn": 21, + "start": 15, + "end": 99 + }, + "directiveLocation": { + "startLine": 2, + "startColumn": 34, + "endLine": 2, + "endColumn": 50, + "start": 44, + "end": 60 + }, + "children": [ + { + "type": "Lwc", + "name": "lwc:component", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 2, + "startColumn": 5, + "endLine": 4, + "endColumn": 21, + "start": 15, + "end": 99, + "startTag": { + "startLine": 2, + "startColumn": 5, + "endLine": 2, + "endColumn": 51, + "start": 15, + "end": 61 + }, + "endTag": { + "startLine": 4, + "startColumn": 5, + "endLine": 4, + "endColumn": 21, + "start": 83, + "end": 99 + } + }, + "attributes": [], + "properties": [], + "directives": [ + { + "type": "Directive", + "name": "Is", + "value": { + "type": "Identifier", + "start": 1, + "end": 5, + "name": "ctor", + "location": { + "startLine": 2, + "startColumn": 20, + "endLine": 2, + "endColumn": 33, + "start": 30, + "end": 43 + } + }, + "location": { + "startLine": 2, + "startColumn": 20, + "endLine": 2, + "endColumn": 33, + "start": 30, + "end": 43 + } + } + ], + "listeners": [], + "children": [ + { + "type": "Element", + "name": "p", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 3, + "startColumn": 9, + "endLine": 3, + "endColumn": 17, + "start": 70, + "end": 78, + "startTag": { + "startLine": 3, + "startColumn": 9, + "endLine": 3, + "endColumn": 12, + "start": 70, + "end": 73 + }, + "endTag": { + "startLine": 3, + "startColumn": 13, + "endLine": 3, + "endColumn": 17, + "start": 74, + "end": 78 + } + }, + "attributes": [], + "properties": [], + "directives": [], + "listeners": [], + "children": [ + { + "type": "Text", + "raw": "1", + "value": { + "type": "Literal", + "value": "1" + }, + "location": { + "startLine": 3, + "startColumn": 12, + "endLine": 3, + "endColumn": 13, + "start": 73, + "end": 74 + } + } + ] + } + ] + } + ] + }, + { + "type": "If", + "modifier": "false", + "condition": { + "type": "Identifier", + "start": 1, + "end": 8, + "name": "isTrue2", + "location": { + "startLine": 5, + "startColumn": 34, + "endLine": 5, + "endColumn": 52, + "start": 133, + "end": 151 + } + }, + "location": { + "startLine": 5, + "startColumn": 5, + "endLine": 7, + "endColumn": 21, + "start": 104, + "end": 190 + }, + "directiveLocation": { + "startLine": 5, + "startColumn": 34, + "endLine": 5, + "endColumn": 52, + "start": 133, + "end": 151 + }, + "children": [ + { + "type": "Lwc", + "name": "lwc:component", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 5, + "startColumn": 5, + "endLine": 7, + "endColumn": 21, + "start": 104, + "end": 190, + "startTag": { + "startLine": 5, + "startColumn": 5, + "endLine": 5, + "endColumn": 53, + "start": 104, + "end": 152 + }, + "endTag": { + "startLine": 7, + "startColumn": 5, + "endLine": 7, + "endColumn": 21, + "start": 174, + "end": 190 + } + }, + "attributes": [], + "properties": [], + "directives": [ + { + "type": "Directive", + "name": "Is", + "value": { + "type": "Identifier", + "start": 1, + "end": 5, + "name": "ctor", + "location": { + "startLine": 5, + "startColumn": 20, + "endLine": 5, + "endColumn": 33, + "start": 119, + "end": 132 + } + }, + "location": { + "startLine": 5, + "startColumn": 20, + "endLine": 5, + "endColumn": 33, + "start": 119, + "end": 132 + } + } + ], + "listeners": [], + "children": [ + { + "type": "Element", + "name": "p", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 6, + "startColumn": 9, + "endLine": 6, + "endColumn": 17, + "start": 161, + "end": 169, + "startTag": { + "startLine": 6, + "startColumn": 9, + "endLine": 6, + "endColumn": 12, + "start": 161, + "end": 164 + }, + "endTag": { + "startLine": 6, + "startColumn": 13, + "endLine": 6, + "endColumn": 17, + "start": 165, + "end": 169 + } + }, + "attributes": [], + "properties": [], + "directives": [], + "listeners": [], + "children": [ + { + "type": "Text", + "raw": "2", + "value": { + "type": "Literal", + "value": "2" + }, + "location": { + "startLine": 6, + "startColumn": 12, + "endLine": 6, + "endColumn": 13, + "start": 164, + "end": 165 + } + } + ] + } + ] + } + ] + } + ] + } +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/config.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/config.json new file mode 100644 index 0000000000..e3593b237f --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/config.json @@ -0,0 +1,3 @@ +{ + "enableDynamicComponents": true +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/expected.js new file mode 100644 index 0000000000..7699024623 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/expected.js @@ -0,0 +1,27 @@ +import { parseFragment, registerTemplate } from "lwc"; +const $fragment1 = parseFragment`1

`; +const $fragment2 = parseFragment`2

`; +const stc0 = { + key: 0, +}; +const stc1 = { + key: 3, +}; +function tmpl($api, $cmp, $slotset, $ctx) { + const { st: api_static_fragment, dc: api_dynamic_component } = $api; + return [ + $cmp.isTrue + ? api_dynamic_component($cmp.ctor, stc0, [ + api_static_fragment($fragment1(), 2), + ]) + : null, + !$cmp.isTrue2 + ? api_dynamic_component($cmp.ctor, stc1, [ + api_static_fragment($fragment2(), 5), + ]) + : null, + ]; + /*LWC compiler vX.X.X*/ +} +export default registerTemplate(tmpl); +tmpl.stylesheets = []; diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/metadata.json new file mode 100644 index 0000000000..51ec5f799c --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/metadata.json @@ -0,0 +1,3 @@ +{ + "warnings": [] +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-inner-html/invalid/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-inner-html/invalid/actual.html index ae19a22dee..873eb6b1fb 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-inner-html/invalid/actual.html +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-inner-html/invalid/actual.html @@ -16,4 +16,10 @@ + + + + + + \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-inner-html/invalid/config.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-inner-html/invalid/config.json new file mode 100644 index 0000000000..b36a075b88 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-inner-html/invalid/config.json @@ -0,0 +1,4 @@ +{ + "enableDynamicComponents": true, + "experimentalDynamicDirective": true +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-inner-html/invalid/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-inner-html/invalid/metadata.json index 063bb7eb22..0bcbf61c10 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-inner-html/invalid/metadata.json +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-inner-html/invalid/metadata.json @@ -35,7 +35,7 @@ }, { "code": 1140, - "message": "LWC1140: Invalid lwc:inner-html usage on element \"\". The directive can't be used on a custom element.", + "message": "LWC1140: Invalid lwc:inner-html usage on element \"\". The directive can't be used on a custom element or special LWC managed elements denoted with lwc:*.", "level": 1, "location": { "line": 15, @@ -54,6 +54,39 @@ "start": 601, "length": 46 } + }, + { + "code": 1187, + "message": "LWC1187: The lwc:dynamic directive is deprecated and will be removed in a future release. Please use lwc:is instead.", + "level": 2, + "location": { + "line": 21, + "column": 5, + "start": 695, + "length": 61 + } + }, + { + "code": 1140, + "message": "LWC1140: Invalid lwc:inner-html usage on element \"\". The directive can't be used on a custom element or special LWC managed elements denoted with lwc:*.", + "level": 1, + "location": { + "line": 21, + "column": 5, + "start": 695, + "length": 61 + } + }, + { + "code": 1140, + "message": "LWC1140: Invalid lwc:inner-html usage on element \"\". The directive can't be used on a custom element or special LWC managed elements denoted with lwc:*.", + "level": 1, + "location": { + "line": 24, + "column": 5, + "start": 818, + "length": 70 + } } ] } \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/actual.html new file mode 100644 index 0000000000..a1af52b58c --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/actual.html @@ -0,0 +1,8 @@ + diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/ast.json new file mode 100644 index 0000000000..853c631051 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/ast.json @@ -0,0 +1,244 @@ +{ + "root": { + "type": "Root", + "location": { + "startLine": 1, + "startColumn": 1, + "endLine": 8, + "endColumn": 12, + "start": 0, + "end": 208, + "startTag": { + "startLine": 1, + "startColumn": 1, + "endLine": 1, + "endColumn": 11, + "start": 0, + "end": 10 + }, + "endTag": { + "startLine": 8, + "startColumn": 1, + "endLine": 8, + "endColumn": 12, + "start": 197, + "end": 208 + } + }, + "directives": [], + "children": [ + { + "type": "IfBlock", + "condition": { + "type": "MemberExpression", + "start": 1, + "end": 11, + "object": { + "type": "MemberExpression", + "object": { + "type": "Identifier", + "name": "$cmp" + }, + "property": { + "type": "Identifier", + "start": 1, + "end": 8, + "name": "visible" + }, + "computed": false, + "optional": false + }, + "property": { + "type": "Identifier", + "start": 9, + "end": 11, + "name": "if" + }, + "computed": false, + "optional": false, + "location": { + "startLine": 2, + "startColumn": 15, + "endLine": 2, + "endColumn": 34, + "start": 25, + "end": 44 + } + }, + "location": { + "startLine": 2, + "startColumn": 5, + "endLine": 4, + "endColumn": 16, + "start": 15, + "end": 91 + }, + "directiveLocation": { + "startLine": 2, + "startColumn": 15, + "endLine": 2, + "endColumn": 34, + "start": 25, + "end": 44 + }, + "children": [ + { + "type": "Element", + "name": "h1", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 3, + "startColumn": 9, + "endLine": 3, + "endColumn": 30, + "start": 54, + "end": 75, + "startTag": { + "startLine": 3, + "startColumn": 9, + "endLine": 3, + "endColumn": 13, + "start": 54, + "end": 58 + }, + "endTag": { + "startLine": 3, + "startColumn": 25, + "endLine": 3, + "endColumn": 30, + "start": 70, + "end": 75 + } + }, + "attributes": [], + "properties": [], + "directives": [], + "listeners": [], + "children": [ + { + "type": "Text", + "raw": "if condition", + "value": { + "type": "Literal", + "value": "if condition" + }, + "location": { + "startLine": 3, + "startColumn": 13, + "endLine": 3, + "endColumn": 25, + "start": 58, + "end": 70 + } + } + ] + } + ], + "else": { + "type": "ElseBlock", + "location": { + "startLine": 5, + "startColumn": 5, + "endLine": 7, + "endColumn": 16, + "start": 96, + "end": 196 + }, + "directiveLocation": { + "startLine": 5, + "startColumn": 15, + "endLine": 5, + "endColumn": 23, + "start": 106, + "end": 114 + }, + "children": [ + { + "type": "Lwc", + "name": "lwc:component", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 6, + "startColumn": 9, + "endLine": 6, + "endColumn": 65, + "start": 124, + "end": 180, + "startTag": { + "startLine": 6, + "startColumn": 9, + "endLine": 6, + "endColumn": 49, + "start": 124, + "end": 164 + }, + "endTag": { + "startLine": 6, + "startColumn": 49, + "endLine": 6, + "endColumn": 65, + "start": 164, + "end": 180 + } + }, + "attributes": [], + "properties": [], + "directives": [ + { + "type": "Directive", + "name": "Is", + "value": { + "type": "MemberExpression", + "start": 1, + "end": 16, + "object": { + "type": "MemberExpression", + "object": { + "type": "Identifier", + "name": "$cmp" + }, + "property": { + "type": "Identifier", + "start": 1, + "end": 12, + "name": "trackedProp" + }, + "computed": false, + "optional": false + }, + "property": { + "type": "Identifier", + "start": 13, + "end": 16, + "name": "foo" + }, + "computed": false, + "optional": false, + "location": { + "startLine": 6, + "startColumn": 24, + "endLine": 6, + "endColumn": 48, + "start": 139, + "end": 163 + } + }, + "location": { + "startLine": 6, + "startColumn": 24, + "endLine": 6, + "endColumn": 48, + "start": 139, + "end": 163 + } + } + ], + "listeners": [], + "children": [] + } + ] + } + } + ] + } +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/config.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/config.json new file mode 100644 index 0000000000..5d05563301 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/config.json @@ -0,0 +1,3 @@ +{ + "enableDynamicComponents": true +} diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/expected.js new file mode 100644 index 0000000000..979539f89f --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/expected.js @@ -0,0 +1,20 @@ +import { parseFragment, registerTemplate } from "lwc"; +const $fragment1 = parseFragment`if condition`; +const stc0 = { + key: 3, +}; +function tmpl($api, $cmp, $slotset, $ctx) { + const { + st: api_static_fragment, + fr: api_fragment, + dc: api_dynamic_component, + } = $api; + return [ + $cmp.visible.if + ? api_fragment(0, [api_static_fragment($fragment1(), 2)], 0) + : api_fragment(0, [api_dynamic_component($cmp.trackedProp.foo, stc0)], 0), + ]; + /*LWC compiler vX.X.X*/ +} +export default registerTemplate(tmpl); +tmpl.stylesheets = []; diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/metadata.json new file mode 100644 index 0000000000..51ec5f799c --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/metadata.json @@ -0,0 +1,3 @@ +{ + "warnings": [] +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/actual.html new file mode 100644 index 0000000000..307550f8b9 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/actual.html @@ -0,0 +1,25 @@ + diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/ast.json new file mode 100644 index 0000000000..0e7794db41 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/ast.json @@ -0,0 +1,805 @@ +{ + "root": { + "type": "Root", + "location": { + "startLine": 1, + "startColumn": 1, + "endLine": 25, + "endColumn": 12, + "start": 0, + "end": 712, + "startTag": { + "startLine": 1, + "startColumn": 1, + "endLine": 1, + "endColumn": 11, + "start": 0, + "end": 10 + }, + "endTag": { + "startLine": 25, + "startColumn": 1, + "endLine": 25, + "endColumn": 12, + "start": 701, + "end": 712 + } + }, + "directives": [], + "children": [ + { + "type": "IfBlock", + "condition": { + "type": "MemberExpression", + "start": 1, + "end": 9, + "object": { + "type": "MemberExpression", + "object": { + "type": "Identifier", + "name": "$cmp" + }, + "property": { + "type": "Identifier", + "start": 1, + "end": 6, + "name": "outer" + }, + "computed": false, + "optional": false + }, + "property": { + "type": "Identifier", + "start": 7, + "end": 9, + "name": "if" + }, + "computed": false, + "optional": false, + "location": { + "startLine": 2, + "startColumn": 15, + "endLine": 2, + "endColumn": 32, + "start": 25, + "end": 42 + } + }, + "location": { + "startLine": 2, + "startColumn": 5, + "endLine": 4, + "endColumn": 16, + "start": 15, + "end": 85 + }, + "directiveLocation": { + "startLine": 2, + "startColumn": 15, + "endLine": 2, + "endColumn": 32, + "start": 25, + "end": 42 + }, + "children": [ + { + "type": "Element", + "name": "h1", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 3, + "startColumn": 9, + "endLine": 3, + "endColumn": 26, + "start": 52, + "end": 69, + "startTag": { + "startLine": 3, + "startColumn": 9, + "endLine": 3, + "endColumn": 13, + "start": 52, + "end": 56 + }, + "endTag": { + "startLine": 3, + "startColumn": 21, + "endLine": 3, + "endColumn": 26, + "start": 64, + "end": 69 + } + }, + "attributes": [], + "properties": [], + "directives": [], + "listeners": [], + "children": [ + { + "type": "Text", + "raw": "outer if", + "value": { + "type": "Literal", + "value": "outer if" + }, + "location": { + "startLine": 3, + "startColumn": 13, + "endLine": 3, + "endColumn": 21, + "start": 56, + "end": 64 + } + } + ] + } + ], + "else": { + "type": "ElseifBlock", + "condition": { + "type": "MemberExpression", + "start": 1, + "end": 14, + "object": { + "type": "MemberExpression", + "object": { + "type": "Identifier", + "name": "$cmp" + }, + "property": { + "type": "Identifier", + "start": 1, + "end": 6, + "name": "outer" + }, + "computed": false, + "optional": false + }, + "property": { + "type": "Identifier", + "start": 7, + "end": 14, + "name": "elseif1" + }, + "computed": false, + "optional": false, + "location": { + "startLine": 5, + "startColumn": 15, + "endLine": 5, + "endColumn": 41, + "start": 100, + "end": 126 + } + }, + "location": { + "startLine": 5, + "startColumn": 5, + "endLine": 7, + "endColumn": 16, + "start": 90, + "end": 173 + }, + "directiveLocation": { + "startLine": 5, + "startColumn": 15, + "endLine": 5, + "endColumn": 41, + "start": 100, + "end": 126 + }, + "children": [ + { + "type": "Element", + "name": "h1", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 6, + "startColumn": 9, + "endLine": 6, + "endColumn": 30, + "start": 136, + "end": 157, + "startTag": { + "startLine": 6, + "startColumn": 9, + "endLine": 6, + "endColumn": 13, + "start": 136, + "end": 140 + }, + "endTag": { + "startLine": 6, + "startColumn": 25, + "endLine": 6, + "endColumn": 30, + "start": 152, + "end": 157 + } + }, + "attributes": [], + "properties": [], + "directives": [], + "listeners": [], + "children": [ + { + "type": "Text", + "raw": "outer elseif", + "value": { + "type": "Literal", + "value": "outer elseif" + }, + "location": { + "startLine": 6, + "startColumn": 13, + "endLine": 6, + "endColumn": 25, + "start": 140, + "end": 152 + } + } + ] + } + ], + "else": { + "type": "ElseifBlock", + "condition": { + "type": "MemberExpression", + "start": 1, + "end": 14, + "object": { + "type": "MemberExpression", + "object": { + "type": "Identifier", + "name": "$cmp" + }, + "property": { + "type": "Identifier", + "start": 1, + "end": 6, + "name": "outer" + }, + "computed": false, + "optional": false + }, + "property": { + "type": "Identifier", + "start": 7, + "end": 14, + "name": "elseif2" + }, + "computed": false, + "optional": false, + "location": { + "startLine": 8, + "startColumn": 15, + "endLine": 8, + "endColumn": 41, + "start": 188, + "end": 214 + } + }, + "location": { + "startLine": 8, + "startColumn": 5, + "endLine": 21, + "endColumn": 16, + "start": 178, + "end": 632 + }, + "directiveLocation": { + "startLine": 8, + "startColumn": 15, + "endLine": 8, + "endColumn": 41, + "start": 188, + "end": 214 + }, + "children": [ + { + "type": "IfBlock", + "condition": { + "type": "MemberExpression", + "start": 1, + "end": 9, + "object": { + "type": "MemberExpression", + "object": { + "type": "Identifier", + "name": "$cmp" + }, + "property": { + "type": "Identifier", + "start": 1, + "end": 6, + "name": "inner" + }, + "computed": false, + "optional": false + }, + "property": { + "type": "Identifier", + "start": 7, + "end": 9, + "name": "if" + }, + "computed": false, + "optional": false, + "location": { + "startLine": 9, + "startColumn": 19, + "endLine": 9, + "endColumn": 36, + "start": 234, + "end": 251 + } + }, + "location": { + "startLine": 9, + "startColumn": 9, + "endLine": 11, + "endColumn": 20, + "start": 224, + "end": 302 + }, + "directiveLocation": { + "startLine": 9, + "startColumn": 19, + "endLine": 9, + "endColumn": 36, + "start": 234, + "end": 251 + }, + "children": [ + { + "type": "Element", + "name": "h1", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 10, + "startColumn": 13, + "endLine": 10, + "endColumn": 30, + "start": 265, + "end": 282, + "startTag": { + "startLine": 10, + "startColumn": 13, + "endLine": 10, + "endColumn": 17, + "start": 265, + "end": 269 + }, + "endTag": { + "startLine": 10, + "startColumn": 25, + "endLine": 10, + "endColumn": 30, + "start": 277, + "end": 282 + } + }, + "attributes": [], + "properties": [], + "directives": [], + "listeners": [], + "children": [ + { + "type": "Text", + "raw": "inner if", + "value": { + "type": "Literal", + "value": "inner if" + }, + "location": { + "startLine": 10, + "startColumn": 17, + "endLine": 10, + "endColumn": 25, + "start": 269, + "end": 277 + } + } + ] + } + ], + "else": { + "type": "ElseifBlock", + "condition": { + "type": "MemberExpression", + "start": 1, + "end": 13, + "object": { + "type": "MemberExpression", + "object": { + "type": "Identifier", + "name": "$cmp" + }, + "property": { + "type": "Identifier", + "start": 1, + "end": 6, + "name": "inner" + }, + "computed": false, + "optional": false + }, + "property": { + "type": "Identifier", + "start": 7, + "end": 13, + "name": "elseif" + }, + "computed": false, + "optional": false, + "location": { + "startLine": 12, + "startColumn": 19, + "endLine": 12, + "endColumn": 44, + "start": 321, + "end": 346 + } + }, + "location": { + "startLine": 12, + "startColumn": 9, + "endLine": 14, + "endColumn": 20, + "start": 311, + "end": 401 + }, + "directiveLocation": { + "startLine": 12, + "startColumn": 19, + "endLine": 12, + "endColumn": 44, + "start": 321, + "end": 346 + }, + "children": [ + { + "type": "Element", + "name": "h1", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 13, + "startColumn": 13, + "endLine": 13, + "endColumn": 34, + "start": 360, + "end": 381, + "startTag": { + "startLine": 13, + "startColumn": 13, + "endLine": 13, + "endColumn": 17, + "start": 360, + "end": 364 + }, + "endTag": { + "startLine": 13, + "startColumn": 29, + "endLine": 13, + "endColumn": 34, + "start": 376, + "end": 381 + } + }, + "attributes": [], + "properties": [], + "directives": [], + "listeners": [], + "children": [ + { + "type": "Text", + "raw": "inner elseif", + "value": { + "type": "Literal", + "value": "inner elseif" + }, + "location": { + "startLine": 13, + "startColumn": 17, + "endLine": 13, + "endColumn": 29, + "start": 364, + "end": 376 + } + } + ] + } + ], + "else": { + "type": "ElseifBlock", + "condition": { + "type": "MemberExpression", + "start": 1, + "end": 14, + "object": { + "type": "MemberExpression", + "object": { + "type": "Identifier", + "name": "$cmp" + }, + "property": { + "type": "Identifier", + "start": 1, + "end": 6, + "name": "inner" + }, + "computed": false, + "optional": false + }, + "property": { + "type": "Identifier", + "start": 7, + "end": 14, + "name": "elseif2" + }, + "computed": false, + "optional": false, + "location": { + "startLine": 15, + "startColumn": 19, + "endLine": 15, + "endColumn": 45, + "start": 420, + "end": 446 + } + }, + "location": { + "startLine": 15, + "startColumn": 9, + "endLine": 17, + "endColumn": 20, + "start": 410, + "end": 536 + }, + "directiveLocation": { + "startLine": 15, + "startColumn": 19, + "endLine": 15, + "endColumn": 45, + "start": 420, + "end": 446 + }, + "children": [ + { + "type": "Lwc", + "name": "lwc:component", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 16, + "startColumn": 13, + "endLine": 16, + "endColumn": 69, + "start": 460, + "end": 516, + "startTag": { + "startLine": 16, + "startColumn": 13, + "endLine": 16, + "endColumn": 53, + "start": 460, + "end": 500 + }, + "endTag": { + "startLine": 16, + "startColumn": 53, + "endLine": 16, + "endColumn": 69, + "start": 500, + "end": 516 + } + }, + "attributes": [], + "properties": [], + "directives": [ + { + "type": "Directive", + "name": "Is", + "value": { + "type": "MemberExpression", + "start": 1, + "end": 16, + "object": { + "type": "MemberExpression", + "object": { + "type": "Identifier", + "name": "$cmp" + }, + "property": { + "type": "Identifier", + "start": 1, + "end": 12, + "name": "trackedProp" + }, + "computed": false, + "optional": false + }, + "property": { + "type": "Identifier", + "start": 13, + "end": 16, + "name": "foo" + }, + "computed": false, + "optional": false, + "location": { + "startLine": 16, + "startColumn": 28, + "endLine": 16, + "endColumn": 52, + "start": 475, + "end": 499 + } + }, + "location": { + "startLine": 16, + "startColumn": 28, + "endLine": 16, + "endColumn": 52, + "start": 475, + "end": 499 + } + } + ], + "listeners": [], + "children": [] + } + ], + "else": { + "type": "ElseBlock", + "location": { + "startLine": 18, + "startColumn": 9, + "endLine": 20, + "endColumn": 20, + "start": 545, + "end": 616 + }, + "directiveLocation": { + "startLine": 18, + "startColumn": 19, + "endLine": 18, + "endColumn": 27, + "start": 555, + "end": 563 + }, + "children": [ + { + "type": "Element", + "name": "h1", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 19, + "startColumn": 13, + "endLine": 19, + "endColumn": 32, + "start": 577, + "end": 596, + "startTag": { + "startLine": 19, + "startColumn": 13, + "endLine": 19, + "endColumn": 17, + "start": 577, + "end": 581 + }, + "endTag": { + "startLine": 19, + "startColumn": 27, + "endLine": 19, + "endColumn": 32, + "start": 591, + "end": 596 + } + }, + "attributes": [], + "properties": [], + "directives": [], + "listeners": [], + "children": [ + { + "type": "Text", + "raw": "inner else", + "value": { + "type": "Literal", + "value": "inner else" + }, + "location": { + "startLine": 19, + "startColumn": 17, + "endLine": 19, + "endColumn": 27, + "start": 581, + "end": 591 + } + } + ] + } + ] + } + } + } + } + ], + "else": { + "type": "ElseBlock", + "location": { + "startLine": 22, + "startColumn": 5, + "endLine": 24, + "endColumn": 16, + "start": 637, + "end": 700 + }, + "directiveLocation": { + "startLine": 22, + "startColumn": 15, + "endLine": 22, + "endColumn": 23, + "start": 647, + "end": 655 + }, + "children": [ + { + "type": "Element", + "name": "h1", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 23, + "startColumn": 9, + "endLine": 23, + "endColumn": 28, + "start": 665, + "end": 684, + "startTag": { + "startLine": 23, + "startColumn": 9, + "endLine": 23, + "endColumn": 13, + "start": 665, + "end": 669 + }, + "endTag": { + "startLine": 23, + "startColumn": 23, + "endLine": 23, + "endColumn": 28, + "start": 679, + "end": 684 + } + }, + "attributes": [], + "properties": [], + "directives": [], + "listeners": [], + "children": [ + { + "type": "Text", + "raw": "outer else", + "value": { + "type": "Literal", + "value": "outer else" + }, + "location": { + "startLine": 23, + "startColumn": 13, + "endLine": 23, + "endColumn": 23, + "start": 669, + "end": 679 + } + } + ] + } + ] + } + } + } + } + ] + } +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/config.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/config.json new file mode 100644 index 0000000000..5d05563301 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/config.json @@ -0,0 +1,3 @@ +{ + "enableDynamicComponents": true +} diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/expected.js new file mode 100644 index 0000000000..5c234fa3d9 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/expected.js @@ -0,0 +1,45 @@ +import { parseFragment, registerTemplate } from "lwc"; +const $fragment1 = parseFragment`outer if`; +const $fragment2 = parseFragment`outer elseif`; +const $fragment3 = parseFragment`inner if`; +const $fragment4 = parseFragment`inner elseif`; +const $fragment5 = parseFragment`inner else`; +const $fragment6 = parseFragment`outer else`; +const stc0 = { + key: 10, +}; +function tmpl($api, $cmp, $slotset, $ctx) { + const { + st: api_static_fragment, + fr: api_fragment, + dc: api_dynamic_component, + } = $api; + return [ + $cmp.outer.if + ? api_fragment(0, [api_static_fragment($fragment1(), 2)], 0) + : $cmp.outer.elseif1 + ? api_fragment(0, [api_static_fragment($fragment2(), 4)], 0) + : $cmp.outer.elseif2 + ? api_fragment( + 0, + [ + $cmp.inner.if + ? api_fragment(5, [api_static_fragment($fragment3(), 7)], 0) + : $cmp.inner.elseif + ? api_fragment(5, [api_static_fragment($fragment4(), 9)], 0) + : $cmp.inner.elseif2 + ? api_fragment( + 5, + [api_dynamic_component($cmp.trackedProp.foo, stc0)], + 0 + ) + : api_fragment(5, [api_static_fragment($fragment5(), 12)], 0), + ], + 0 + ) + : api_fragment(0, [api_static_fragment($fragment6(), 14)], 0), + ]; + /*LWC compiler vX.X.X*/ +} +export default registerTemplate(tmpl); +tmpl.stylesheets = []; diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/metadata.json new file mode 100644 index 0000000000..51ec5f799c --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/metadata.json @@ -0,0 +1,3 @@ +{ + "warnings": [] +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/actual.html new file mode 100644 index 0000000000..df68372179 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/actual.html @@ -0,0 +1,11 @@ + diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/ast.json new file mode 100644 index 0000000000..22c7676139 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/ast.json @@ -0,0 +1,352 @@ +{ + "root": { + "type": "Root", + "location": { + "startLine": 1, + "startColumn": 1, + "endLine": 11, + "endColumn": 12, + "start": 0, + "end": 301, + "startTag": { + "startLine": 1, + "startColumn": 1, + "endLine": 1, + "endColumn": 11, + "start": 0, + "end": 10 + }, + "endTag": { + "startLine": 11, + "startColumn": 1, + "endLine": 11, + "endColumn": 12, + "start": 290, + "end": 301 + } + }, + "directives": [], + "children": [ + { + "type": "IfBlock", + "condition": { + "type": "MemberExpression", + "start": 1, + "end": 11, + "object": { + "type": "MemberExpression", + "object": { + "type": "Identifier", + "name": "$cmp" + }, + "property": { + "type": "Identifier", + "start": 1, + "end": 8, + "name": "visible" + }, + "computed": false, + "optional": false + }, + "property": { + "type": "Identifier", + "start": 9, + "end": 11, + "name": "if" + }, + "computed": false, + "optional": false, + "location": { + "startLine": 2, + "startColumn": 15, + "endLine": 2, + "endColumn": 34, + "start": 25, + "end": 44 + } + }, + "location": { + "startLine": 2, + "startColumn": 5, + "endLine": 4, + "endColumn": 16, + "start": 15, + "end": 91 + }, + "directiveLocation": { + "startLine": 2, + "startColumn": 15, + "endLine": 2, + "endColumn": 34, + "start": 25, + "end": 44 + }, + "children": [ + { + "type": "Element", + "name": "h1", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 3, + "startColumn": 9, + "endLine": 3, + "endColumn": 30, + "start": 54, + "end": 75, + "startTag": { + "startLine": 3, + "startColumn": 9, + "endLine": 3, + "endColumn": 13, + "start": 54, + "end": 58 + }, + "endTag": { + "startLine": 3, + "startColumn": 25, + "endLine": 3, + "endColumn": 30, + "start": 70, + "end": 75 + } + }, + "attributes": [], + "properties": [], + "directives": [], + "listeners": [], + "children": [ + { + "type": "Text", + "raw": "if condition", + "value": { + "type": "Literal", + "value": "if condition" + }, + "location": { + "startLine": 3, + "startColumn": 13, + "endLine": 3, + "endColumn": 25, + "start": 58, + "end": 70 + } + } + ] + } + ], + "else": { + "type": "ElseifBlock", + "condition": { + "type": "MemberExpression", + "start": 1, + "end": 15, + "object": { + "type": "MemberExpression", + "object": { + "type": "Identifier", + "name": "$cmp" + }, + "property": { + "type": "Identifier", + "start": 1, + "end": 8, + "name": "visible" + }, + "computed": false, + "optional": false + }, + "property": { + "type": "Identifier", + "start": 9, + "end": 15, + "name": "elseif" + }, + "computed": false, + "optional": false, + "location": { + "startLine": 5, + "startColumn": 15, + "endLine": 5, + "endColumn": 42, + "start": 106, + "end": 133 + } + }, + "location": { + "startLine": 5, + "startColumn": 5, + "endLine": 7, + "endColumn": 16, + "start": 96, + "end": 184 + }, + "directiveLocation": { + "startLine": 5, + "startColumn": 15, + "endLine": 5, + "endColumn": 42, + "start": 106, + "end": 133 + }, + "children": [ + { + "type": "Element", + "name": "h1", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 6, + "startColumn": 9, + "endLine": 6, + "endColumn": 34, + "start": 143, + "end": 168, + "startTag": { + "startLine": 6, + "startColumn": 9, + "endLine": 6, + "endColumn": 13, + "start": 143, + "end": 147 + }, + "endTag": { + "startLine": 6, + "startColumn": 29, + "endLine": 6, + "endColumn": 34, + "start": 163, + "end": 168 + } + }, + "attributes": [], + "properties": [], + "directives": [], + "listeners": [], + "children": [ + { + "type": "Text", + "raw": "elseif condition", + "value": { + "type": "Literal", + "value": "elseif condition" + }, + "location": { + "startLine": 6, + "startColumn": 13, + "endLine": 6, + "endColumn": 29, + "start": 147, + "end": 163 + } + } + ] + } + ], + "else": { + "type": "ElseBlock", + "location": { + "startLine": 8, + "startColumn": 5, + "endLine": 10, + "endColumn": 16, + "start": 189, + "end": 289 + }, + "directiveLocation": { + "startLine": 8, + "startColumn": 15, + "endLine": 8, + "endColumn": 23, + "start": 199, + "end": 207 + }, + "children": [ + { + "type": "Lwc", + "name": "lwc:component", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 9, + "startColumn": 9, + "endLine": 9, + "endColumn": 65, + "start": 217, + "end": 273, + "startTag": { + "startLine": 9, + "startColumn": 9, + "endLine": 9, + "endColumn": 49, + "start": 217, + "end": 257 + }, + "endTag": { + "startLine": 9, + "startColumn": 49, + "endLine": 9, + "endColumn": 65, + "start": 257, + "end": 273 + } + }, + "attributes": [], + "properties": [], + "directives": [ + { + "type": "Directive", + "name": "Is", + "value": { + "type": "MemberExpression", + "start": 1, + "end": 16, + "object": { + "type": "MemberExpression", + "object": { + "type": "Identifier", + "name": "$cmp" + }, + "property": { + "type": "Identifier", + "start": 1, + "end": 12, + "name": "trackedProp" + }, + "computed": false, + "optional": false + }, + "property": { + "type": "Identifier", + "start": 13, + "end": 16, + "name": "foo" + }, + "computed": false, + "optional": false, + "location": { + "startLine": 9, + "startColumn": 24, + "endLine": 9, + "endColumn": 48, + "start": 232, + "end": 256 + } + }, + "location": { + "startLine": 9, + "startColumn": 24, + "endLine": 9, + "endColumn": 48, + "start": 232, + "end": 256 + } + } + ], + "listeners": [], + "children": [] + } + ] + } + } + } + ] + } +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/config.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/config.json new file mode 100644 index 0000000000..5d05563301 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/config.json @@ -0,0 +1,3 @@ +{ + "enableDynamicComponents": true +} diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/expected.js new file mode 100644 index 0000000000..be75552536 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/expected.js @@ -0,0 +1,23 @@ +import { parseFragment, registerTemplate } from "lwc"; +const $fragment1 = parseFragment`if condition`; +const $fragment2 = parseFragment`elseif condition`; +const stc0 = { + key: 5, +}; +function tmpl($api, $cmp, $slotset, $ctx) { + const { + st: api_static_fragment, + fr: api_fragment, + dc: api_dynamic_component, + } = $api; + return [ + $cmp.visible.if + ? api_fragment(0, [api_static_fragment($fragment1(), 2)], 0) + : $cmp.visible.elseif + ? api_fragment(0, [api_static_fragment($fragment2(), 4)], 0) + : api_fragment(0, [api_dynamic_component($cmp.trackedProp.foo, stc0)], 0), + ]; + /*LWC compiler vX.X.X*/ +} +export default registerTemplate(tmpl); +tmpl.stylesheets = []; diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/metadata.json new file mode 100644 index 0000000000..51ec5f799c --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/metadata.json @@ -0,0 +1,3 @@ +{ + "warnings": [] +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/actual.html new file mode 100644 index 0000000000..b1d30351c2 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/actual.html @@ -0,0 +1,14 @@ + diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/ast.json new file mode 100644 index 0000000000..3c5b10fe15 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/ast.json @@ -0,0 +1,460 @@ +{ + "root": { + "type": "Root", + "location": { + "startLine": 1, + "startColumn": 1, + "endLine": 14, + "endColumn": 12, + "start": 0, + "end": 393, + "startTag": { + "startLine": 1, + "startColumn": 1, + "endLine": 1, + "endColumn": 11, + "start": 0, + "end": 10 + }, + "endTag": { + "startLine": 14, + "startColumn": 1, + "endLine": 14, + "endColumn": 12, + "start": 382, + "end": 393 + } + }, + "directives": [], + "children": [ + { + "type": "IfBlock", + "condition": { + "type": "MemberExpression", + "start": 1, + "end": 11, + "object": { + "type": "MemberExpression", + "object": { + "type": "Identifier", + "name": "$cmp" + }, + "property": { + "type": "Identifier", + "start": 1, + "end": 8, + "name": "visible" + }, + "computed": false, + "optional": false + }, + "property": { + "type": "Identifier", + "start": 9, + "end": 11, + "name": "if" + }, + "computed": false, + "optional": false, + "location": { + "startLine": 2, + "startColumn": 15, + "endLine": 2, + "endColumn": 34, + "start": 25, + "end": 44 + } + }, + "location": { + "startLine": 2, + "startColumn": 5, + "endLine": 4, + "endColumn": 16, + "start": 15, + "end": 91 + }, + "directiveLocation": { + "startLine": 2, + "startColumn": 15, + "endLine": 2, + "endColumn": 34, + "start": 25, + "end": 44 + }, + "children": [ + { + "type": "Element", + "name": "h1", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 3, + "startColumn": 9, + "endLine": 3, + "endColumn": 30, + "start": 54, + "end": 75, + "startTag": { + "startLine": 3, + "startColumn": 9, + "endLine": 3, + "endColumn": 13, + "start": 54, + "end": 58 + }, + "endTag": { + "startLine": 3, + "startColumn": 25, + "endLine": 3, + "endColumn": 30, + "start": 70, + "end": 75 + } + }, + "attributes": [], + "properties": [], + "directives": [], + "listeners": [], + "children": [ + { + "type": "Text", + "raw": "if condition", + "value": { + "type": "Literal", + "value": "if condition" + }, + "location": { + "startLine": 3, + "startColumn": 13, + "endLine": 3, + "endColumn": 25, + "start": 58, + "end": 70 + } + } + ] + } + ], + "else": { + "type": "ElseifBlock", + "condition": { + "type": "MemberExpression", + "start": 1, + "end": 15, + "object": { + "type": "MemberExpression", + "object": { + "type": "Identifier", + "name": "$cmp" + }, + "property": { + "type": "Identifier", + "start": 1, + "end": 8, + "name": "visible" + }, + "computed": false, + "optional": false + }, + "property": { + "type": "Identifier", + "start": 9, + "end": 15, + "name": "elseif" + }, + "computed": false, + "optional": false, + "location": { + "startLine": 5, + "startColumn": 15, + "endLine": 5, + "endColumn": 42, + "start": 106, + "end": 133 + } + }, + "location": { + "startLine": 5, + "startColumn": 5, + "endLine": 7, + "endColumn": 16, + "start": 96, + "end": 184 + }, + "directiveLocation": { + "startLine": 5, + "startColumn": 15, + "endLine": 5, + "endColumn": 42, + "start": 106, + "end": 133 + }, + "children": [ + { + "type": "Element", + "name": "h1", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 6, + "startColumn": 9, + "endLine": 6, + "endColumn": 34, + "start": 143, + "end": 168, + "startTag": { + "startLine": 6, + "startColumn": 9, + "endLine": 6, + "endColumn": 13, + "start": 143, + "end": 147 + }, + "endTag": { + "startLine": 6, + "startColumn": 29, + "endLine": 6, + "endColumn": 34, + "start": 163, + "end": 168 + } + }, + "attributes": [], + "properties": [], + "directives": [], + "listeners": [], + "children": [ + { + "type": "Text", + "raw": "elseif condition", + "value": { + "type": "Literal", + "value": "elseif condition" + }, + "location": { + "startLine": 6, + "startColumn": 13, + "endLine": 6, + "endColumn": 29, + "start": 147, + "end": 163 + } + } + ] + } + ], + "else": { + "type": "ElseifBlock", + "condition": { + "type": "MemberExpression", + "start": 1, + "end": 16, + "object": { + "type": "MemberExpression", + "object": { + "type": "Identifier", + "name": "$cmp" + }, + "property": { + "type": "Identifier", + "start": 1, + "end": 8, + "name": "visible" + }, + "computed": false, + "optional": false + }, + "property": { + "type": "Identifier", + "start": 9, + "end": 16, + "name": "elseif2" + }, + "computed": false, + "optional": false, + "location": { + "startLine": 8, + "startColumn": 15, + "endLine": 8, + "endColumn": 43, + "start": 199, + "end": 227 + } + }, + "location": { + "startLine": 8, + "startColumn": 5, + "endLine": 10, + "endColumn": 16, + "start": 189, + "end": 309 + }, + "directiveLocation": { + "startLine": 8, + "startColumn": 15, + "endLine": 8, + "endColumn": 43, + "start": 199, + "end": 227 + }, + "children": [ + { + "type": "Lwc", + "name": "lwc:component", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 9, + "startColumn": 9, + "endLine": 9, + "endColumn": 65, + "start": 237, + "end": 293, + "startTag": { + "startLine": 9, + "startColumn": 9, + "endLine": 9, + "endColumn": 49, + "start": 237, + "end": 277 + }, + "endTag": { + "startLine": 9, + "startColumn": 49, + "endLine": 9, + "endColumn": 65, + "start": 277, + "end": 293 + } + }, + "attributes": [], + "properties": [], + "directives": [ + { + "type": "Directive", + "name": "Is", + "value": { + "type": "MemberExpression", + "start": 1, + "end": 16, + "object": { + "type": "MemberExpression", + "object": { + "type": "Identifier", + "name": "$cmp" + }, + "property": { + "type": "Identifier", + "start": 1, + "end": 12, + "name": "trackedProp" + }, + "computed": false, + "optional": false + }, + "property": { + "type": "Identifier", + "start": 13, + "end": 16, + "name": "foo" + }, + "computed": false, + "optional": false, + "location": { + "startLine": 9, + "startColumn": 24, + "endLine": 9, + "endColumn": 48, + "start": 252, + "end": 276 + } + }, + "location": { + "startLine": 9, + "startColumn": 24, + "endLine": 9, + "endColumn": 48, + "start": 252, + "end": 276 + } + } + ], + "listeners": [], + "children": [] + } + ], + "else": { + "type": "ElseBlock", + "location": { + "startLine": 11, + "startColumn": 5, + "endLine": 13, + "endColumn": 16, + "start": 314, + "end": 381 + }, + "directiveLocation": { + "startLine": 11, + "startColumn": 15, + "endLine": 11, + "endColumn": 23, + "start": 324, + "end": 332 + }, + "children": [ + { + "type": "Element", + "name": "h1", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 12, + "startColumn": 9, + "endLine": 12, + "endColumn": 32, + "start": 342, + "end": 365, + "startTag": { + "startLine": 12, + "startColumn": 9, + "endLine": 12, + "endColumn": 13, + "start": 342, + "end": 346 + }, + "endTag": { + "startLine": 12, + "startColumn": 27, + "endLine": 12, + "endColumn": 32, + "start": 360, + "end": 365 + } + }, + "attributes": [], + "properties": [], + "directives": [], + "listeners": [], + "children": [ + { + "type": "Text", + "raw": "else condition", + "value": { + "type": "Literal", + "value": "else condition" + }, + "location": { + "startLine": 12, + "startColumn": 13, + "endLine": 12, + "endColumn": 27, + "start": 346, + "end": 360 + } + } + ] + } + ] + } + } + } + } + ] + } +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/config.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/config.json new file mode 100644 index 0000000000..5d05563301 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/config.json @@ -0,0 +1,3 @@ +{ + "enableDynamicComponents": true +} diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/expected.js new file mode 100644 index 0000000000..45418a1915 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/expected.js @@ -0,0 +1,26 @@ +import { parseFragment, registerTemplate } from "lwc"; +const $fragment1 = parseFragment`if condition`; +const $fragment2 = parseFragment`elseif condition`; +const $fragment3 = parseFragment`else condition`; +const stc0 = { + key: 5, +}; +function tmpl($api, $cmp, $slotset, $ctx) { + const { + st: api_static_fragment, + fr: api_fragment, + dc: api_dynamic_component, + } = $api; + return [ + $cmp.visible.if + ? api_fragment(0, [api_static_fragment($fragment1(), 2)], 0) + : $cmp.visible.elseif + ? api_fragment(0, [api_static_fragment($fragment2(), 4)], 0) + : $cmp.visible.elseif2 + ? api_fragment(0, [api_dynamic_component($cmp.trackedProp.foo, stc0)], 0) + : api_fragment(0, [api_static_fragment($fragment3(), 7)], 0), + ]; + /*LWC compiler vX.X.X*/ +} +export default registerTemplate(tmpl); +tmpl.stylesheets = []; diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/metadata.json new file mode 100644 index 0000000000..51ec5f799c --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/metadata.json @@ -0,0 +1,3 @@ +{ + "warnings": [] +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/actual.html new file mode 100644 index 0000000000..c569689625 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/actual.html @@ -0,0 +1,8 @@ + diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/ast.json new file mode 100644 index 0000000000..6d53a7281c --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/ast.json @@ -0,0 +1,280 @@ +{ + "root": { + "type": "Root", + "location": { + "startLine": 1, + "startColumn": 1, + "endLine": 8, + "endColumn": 12, + "start": 0, + "end": 227, + "startTag": { + "startLine": 1, + "startColumn": 1, + "endLine": 1, + "endColumn": 11, + "start": 0, + "end": 10 + }, + "endTag": { + "startLine": 8, + "startColumn": 1, + "endLine": 8, + "endColumn": 12, + "start": 216, + "end": 227 + } + }, + "directives": [], + "children": [ + { + "type": "IfBlock", + "condition": { + "type": "MemberExpression", + "start": 1, + "end": 11, + "object": { + "type": "MemberExpression", + "object": { + "type": "Identifier", + "name": "$cmp" + }, + "property": { + "type": "Identifier", + "start": 1, + "end": 8, + "name": "visible" + }, + "computed": false, + "optional": false + }, + "property": { + "type": "Identifier", + "start": 9, + "end": 11, + "name": "if" + }, + "computed": false, + "optional": false, + "location": { + "startLine": 2, + "startColumn": 15, + "endLine": 2, + "endColumn": 34, + "start": 25, + "end": 44 + } + }, + "location": { + "startLine": 2, + "startColumn": 5, + "endLine": 4, + "endColumn": 16, + "start": 15, + "end": 91 + }, + "directiveLocation": { + "startLine": 2, + "startColumn": 15, + "endLine": 2, + "endColumn": 34, + "start": 25, + "end": 44 + }, + "children": [ + { + "type": "Element", + "name": "h1", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 3, + "startColumn": 9, + "endLine": 3, + "endColumn": 30, + "start": 54, + "end": 75, + "startTag": { + "startLine": 3, + "startColumn": 9, + "endLine": 3, + "endColumn": 13, + "start": 54, + "end": 58 + }, + "endTag": { + "startLine": 3, + "startColumn": 25, + "endLine": 3, + "endColumn": 30, + "start": 70, + "end": 75 + } + }, + "attributes": [], + "properties": [], + "directives": [], + "listeners": [], + "children": [ + { + "type": "Text", + "raw": "if condition", + "value": { + "type": "Literal", + "value": "if condition" + }, + "location": { + "startLine": 3, + "startColumn": 13, + "endLine": 3, + "endColumn": 25, + "start": 58, + "end": 70 + } + } + ] + } + ], + "else": { + "type": "ElseifBlock", + "condition": { + "type": "MemberExpression", + "start": 1, + "end": 15, + "object": { + "type": "MemberExpression", + "object": { + "type": "Identifier", + "name": "$cmp" + }, + "property": { + "type": "Identifier", + "start": 1, + "end": 8, + "name": "visible" + }, + "computed": false, + "optional": false + }, + "property": { + "type": "Identifier", + "start": 9, + "end": 15, + "name": "elseif" + }, + "computed": false, + "optional": false, + "location": { + "startLine": 5, + "startColumn": 15, + "endLine": 5, + "endColumn": 42, + "start": 106, + "end": 133 + } + }, + "location": { + "startLine": 5, + "startColumn": 5, + "endLine": 7, + "endColumn": 16, + "start": 96, + "end": 215 + }, + "directiveLocation": { + "startLine": 5, + "startColumn": 15, + "endLine": 5, + "endColumn": 42, + "start": 106, + "end": 133 + }, + "children": [ + { + "type": "Lwc", + "name": "lwc:component", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 6, + "startColumn": 9, + "endLine": 6, + "endColumn": 65, + "start": 143, + "end": 199, + "startTag": { + "startLine": 6, + "startColumn": 9, + "endLine": 6, + "endColumn": 49, + "start": 143, + "end": 183 + }, + "endTag": { + "startLine": 6, + "startColumn": 49, + "endLine": 6, + "endColumn": 65, + "start": 183, + "end": 199 + } + }, + "attributes": [], + "properties": [], + "directives": [ + { + "type": "Directive", + "name": "Is", + "value": { + "type": "MemberExpression", + "start": 1, + "end": 16, + "object": { + "type": "MemberExpression", + "object": { + "type": "Identifier", + "name": "$cmp" + }, + "property": { + "type": "Identifier", + "start": 1, + "end": 12, + "name": "trackedProp" + }, + "computed": false, + "optional": false + }, + "property": { + "type": "Identifier", + "start": 13, + "end": 16, + "name": "foo" + }, + "computed": false, + "optional": false, + "location": { + "startLine": 6, + "startColumn": 24, + "endLine": 6, + "endColumn": 48, + "start": 158, + "end": 182 + } + }, + "location": { + "startLine": 6, + "startColumn": 24, + "endLine": 6, + "endColumn": 48, + "start": 158, + "end": 182 + } + } + ], + "listeners": [], + "children": [] + } + ] + } + } + ] + } +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/config.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/config.json new file mode 100644 index 0000000000..5d05563301 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/config.json @@ -0,0 +1,3 @@ +{ + "enableDynamicComponents": true +} diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/expected.js new file mode 100644 index 0000000000..ccae1ce967 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/expected.js @@ -0,0 +1,22 @@ +import { parseFragment, registerTemplate } from "lwc"; +const $fragment1 = parseFragment`if condition`; +const stc0 = { + key: 3, +}; +function tmpl($api, $cmp, $slotset, $ctx) { + const { + st: api_static_fragment, + fr: api_fragment, + dc: api_dynamic_component, + } = $api; + return [ + $cmp.visible.if + ? api_fragment(0, [api_static_fragment($fragment1(), 2)], 0) + : $cmp.visible.elseif + ? api_fragment(0, [api_dynamic_component($cmp.trackedProp.foo, stc0)], 0) + : null, + ]; + /*LWC compiler vX.X.X*/ +} +export default registerTemplate(tmpl); +tmpl.stylesheets = []; diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/metadata.json new file mode 100644 index 0000000000..51ec5f799c --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/metadata.json @@ -0,0 +1,3 @@ +{ + "warnings": [] +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if/actual.html new file mode 100644 index 0000000000..b949fa1ccf --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if/actual.html @@ -0,0 +1,5 @@ + diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if/ast.json new file mode 100644 index 0000000000..2933d65917 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if/ast.json @@ -0,0 +1,172 @@ +{ + "root": { + "type": "Root", + "location": { + "startLine": 1, + "startColumn": 1, + "endLine": 5, + "endColumn": 12, + "start": 0, + "end": 138, + "startTag": { + "startLine": 1, + "startColumn": 1, + "endLine": 1, + "endColumn": 11, + "start": 0, + "end": 10 + }, + "endTag": { + "startLine": 5, + "startColumn": 1, + "endLine": 5, + "endColumn": 12, + "start": 127, + "end": 138 + } + }, + "directives": [], + "children": [ + { + "type": "IfBlock", + "condition": { + "type": "MemberExpression", + "start": 1, + "end": 11, + "object": { + "type": "MemberExpression", + "object": { + "type": "Identifier", + "name": "$cmp" + }, + "property": { + "type": "Identifier", + "start": 1, + "end": 8, + "name": "visible" + }, + "computed": false, + "optional": false + }, + "property": { + "type": "Identifier", + "start": 9, + "end": 11, + "name": "if" + }, + "computed": false, + "optional": false, + "location": { + "startLine": 2, + "startColumn": 15, + "endLine": 2, + "endColumn": 34, + "start": 25, + "end": 44 + } + }, + "location": { + "startLine": 2, + "startColumn": 5, + "endLine": 4, + "endColumn": 16, + "start": 15, + "end": 126 + }, + "directiveLocation": { + "startLine": 2, + "startColumn": 15, + "endLine": 2, + "endColumn": 34, + "start": 25, + "end": 44 + }, + "children": [ + { + "type": "Lwc", + "name": "lwc:component", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 3, + "startColumn": 9, + "endLine": 3, + "endColumn": 65, + "start": 54, + "end": 110, + "startTag": { + "startLine": 3, + "startColumn": 9, + "endLine": 3, + "endColumn": 49, + "start": 54, + "end": 94 + }, + "endTag": { + "startLine": 3, + "startColumn": 49, + "endLine": 3, + "endColumn": 65, + "start": 94, + "end": 110 + } + }, + "attributes": [], + "properties": [], + "directives": [ + { + "type": "Directive", + "name": "Is", + "value": { + "type": "MemberExpression", + "start": 1, + "end": 16, + "object": { + "type": "MemberExpression", + "object": { + "type": "Identifier", + "name": "$cmp" + }, + "property": { + "type": "Identifier", + "start": 1, + "end": 12, + "name": "trackedProp" + }, + "computed": false, + "optional": false + }, + "property": { + "type": "Identifier", + "start": 13, + "end": 16, + "name": "foo" + }, + "computed": false, + "optional": false, + "location": { + "startLine": 3, + "startColumn": 24, + "endLine": 3, + "endColumn": 48, + "start": 69, + "end": 93 + } + }, + "location": { + "startLine": 3, + "startColumn": 24, + "endLine": 3, + "endColumn": 48, + "start": 69, + "end": 93 + } + } + ], + "listeners": [], + "children": [] + } + ] + } + ] + } +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if/config.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if/config.json new file mode 100644 index 0000000000..5d05563301 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if/config.json @@ -0,0 +1,3 @@ +{ + "enableDynamicComponents": true +} diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if/expected.js new file mode 100644 index 0000000000..2d7ad57a6d --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if/expected.js @@ -0,0 +1,15 @@ +import { registerTemplate } from "lwc"; +const stc0 = { + key: 1, +}; +function tmpl($api, $cmp, $slotset, $ctx) { + const { dc: api_dynamic_component, fr: api_fragment } = $api; + return [ + $cmp.visible.if + ? api_fragment(0, [api_dynamic_component($cmp.trackedProp.foo, stc0)], 0) + : null, + ]; + /*LWC compiler vX.X.X*/ +} +export default registerTemplate(tmpl); +tmpl.stylesheets = []; diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if/metadata.json new file mode 100644 index 0000000000..51ec5f799c --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if/metadata.json @@ -0,0 +1,3 @@ +{ + "warnings": [] +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/actual.html new file mode 100644 index 0000000000..f220bc1f20 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/actual.html @@ -0,0 +1,11 @@ + diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/ast.json new file mode 100644 index 0000000000..214e99ff99 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/ast.json @@ -0,0 +1,506 @@ +{ + "root": { + "type": "Root", + "location": { + "startLine": 1, + "startColumn": 1, + "endLine": 11, + "endColumn": 12, + "start": 0, + "end": 343, + "startTag": { + "startLine": 1, + "startColumn": 1, + "endLine": 1, + "endColumn": 11, + "start": 0, + "end": 10 + }, + "endTag": { + "startLine": 11, + "startColumn": 1, + "endLine": 11, + "endColumn": 12, + "start": 332, + "end": 343 + } + }, + "directives": [], + "children": [ + { + "type": "IfBlock", + "condition": { + "type": "MemberExpression", + "start": 1, + "end": 11, + "object": { + "type": "MemberExpression", + "object": { + "type": "Identifier", + "name": "$cmp" + }, + "property": { + "type": "Identifier", + "start": 1, + "end": 8, + "name": "visible" + }, + "computed": false, + "optional": false + }, + "property": { + "type": "Identifier", + "start": 9, + "end": 11, + "name": "if" + }, + "computed": false, + "optional": false, + "location": { + "startLine": 2, + "startColumn": 35, + "endLine": 2, + "endColumn": 54, + "start": 45, + "end": 64 + } + }, + "location": { + "startLine": 2, + "startColumn": 5, + "endLine": 4, + "endColumn": 21, + "start": 15, + "end": 116 + }, + "directiveLocation": { + "startLine": 2, + "startColumn": 35, + "endLine": 2, + "endColumn": 54, + "start": 45, + "end": 64 + }, + "children": [ + { + "type": "Lwc", + "name": "lwc:component", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 2, + "startColumn": 5, + "endLine": 4, + "endColumn": 21, + "start": 15, + "end": 116, + "startTag": { + "startLine": 2, + "startColumn": 5, + "endLine": 2, + "endColumn": 55, + "start": 15, + "end": 65 + }, + "endTag": { + "startLine": 4, + "startColumn": 5, + "endLine": 4, + "endColumn": 21, + "start": 100, + "end": 116 + } + }, + "attributes": [], + "properties": [], + "directives": [ + { + "type": "Directive", + "name": "Is", + "value": { + "type": "Identifier", + "start": 1, + "end": 6, + "name": "ctor1", + "location": { + "startLine": 2, + "startColumn": 20, + "endLine": 2, + "endColumn": 34, + "start": 30, + "end": 44 + } + }, + "location": { + "startLine": 2, + "startColumn": 20, + "endLine": 2, + "endColumn": 34, + "start": 30, + "end": 44 + } + } + ], + "listeners": [], + "children": [ + { + "type": "Element", + "name": "h1", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 3, + "startColumn": 9, + "endLine": 3, + "endColumn": 30, + "start": 74, + "end": 95, + "startTag": { + "startLine": 3, + "startColumn": 9, + "endLine": 3, + "endColumn": 13, + "start": 74, + "end": 78 + }, + "endTag": { + "startLine": 3, + "startColumn": 25, + "endLine": 3, + "endColumn": 30, + "start": 90, + "end": 95 + } + }, + "attributes": [], + "properties": [], + "directives": [], + "listeners": [], + "children": [ + { + "type": "Text", + "raw": "if condition", + "value": { + "type": "Literal", + "value": "if condition" + }, + "location": { + "startLine": 3, + "startColumn": 13, + "endLine": 3, + "endColumn": 25, + "start": 78, + "end": 90 + } + } + ] + } + ] + } + ], + "else": { + "type": "ElseifBlock", + "condition": { + "type": "MemberExpression", + "start": 1, + "end": 15, + "object": { + "type": "MemberExpression", + "object": { + "type": "Identifier", + "name": "$cmp" + }, + "property": { + "type": "Identifier", + "start": 1, + "end": 8, + "name": "visible" + }, + "computed": false, + "optional": false + }, + "property": { + "type": "Identifier", + "start": 9, + "end": 15, + "name": "elseif" + }, + "computed": false, + "optional": false, + "location": { + "startLine": 5, + "startColumn": 35, + "endLine": 5, + "endColumn": 62, + "start": 151, + "end": 178 + } + }, + "location": { + "startLine": 5, + "startColumn": 5, + "endLine": 7, + "endColumn": 21, + "start": 121, + "end": 234 + }, + "directiveLocation": { + "startLine": 5, + "startColumn": 35, + "endLine": 5, + "endColumn": 62, + "start": 151, + "end": 178 + }, + "children": [ + { + "type": "Lwc", + "name": "lwc:component", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 5, + "startColumn": 5, + "endLine": 7, + "endColumn": 21, + "start": 121, + "end": 234, + "startTag": { + "startLine": 5, + "startColumn": 5, + "endLine": 5, + "endColumn": 63, + "start": 121, + "end": 179 + }, + "endTag": { + "startLine": 7, + "startColumn": 5, + "endLine": 7, + "endColumn": 21, + "start": 218, + "end": 234 + } + }, + "attributes": [], + "properties": [], + "directives": [ + { + "type": "Directive", + "name": "Is", + "value": { + "type": "Identifier", + "start": 1, + "end": 6, + "name": "ctor2", + "location": { + "startLine": 5, + "startColumn": 20, + "endLine": 5, + "endColumn": 34, + "start": 136, + "end": 150 + } + }, + "location": { + "startLine": 5, + "startColumn": 20, + "endLine": 5, + "endColumn": 34, + "start": 136, + "end": 150 + } + } + ], + "listeners": [], + "children": [ + { + "type": "Element", + "name": "h1", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 6, + "startColumn": 9, + "endLine": 6, + "endColumn": 34, + "start": 188, + "end": 213, + "startTag": { + "startLine": 6, + "startColumn": 9, + "endLine": 6, + "endColumn": 13, + "start": 188, + "end": 192 + }, + "endTag": { + "startLine": 6, + "startColumn": 29, + "endLine": 6, + "endColumn": 34, + "start": 208, + "end": 213 + } + }, + "attributes": [], + "properties": [], + "directives": [], + "listeners": [], + "children": [ + { + "type": "Text", + "raw": "elseif condition", + "value": { + "type": "Literal", + "value": "elseif condition" + }, + "location": { + "startLine": 6, + "startColumn": 13, + "endLine": 6, + "endColumn": 29, + "start": 192, + "end": 208 + } + } + ] + } + ] + } + ], + "else": { + "type": "ElseBlock", + "location": { + "startLine": 8, + "startColumn": 5, + "endLine": 10, + "endColumn": 21, + "start": 239, + "end": 331 + }, + "directiveLocation": { + "startLine": 8, + "startColumn": 35, + "endLine": 8, + "endColumn": 43, + "start": 269, + "end": 277 + }, + "children": [ + { + "type": "Lwc", + "name": "lwc:component", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 8, + "startColumn": 5, + "endLine": 10, + "endColumn": 21, + "start": 239, + "end": 331, + "startTag": { + "startLine": 8, + "startColumn": 5, + "endLine": 8, + "endColumn": 44, + "start": 239, + "end": 278 + }, + "endTag": { + "startLine": 10, + "startColumn": 5, + "endLine": 10, + "endColumn": 21, + "start": 315, + "end": 331 + } + }, + "attributes": [], + "properties": [], + "directives": [ + { + "type": "Directive", + "name": "Is", + "value": { + "type": "Identifier", + "start": 1, + "end": 6, + "name": "ctor3", + "location": { + "startLine": 8, + "startColumn": 20, + "endLine": 8, + "endColumn": 34, + "start": 254, + "end": 268 + } + }, + "location": { + "startLine": 8, + "startColumn": 20, + "endLine": 8, + "endColumn": 34, + "start": 254, + "end": 268 + } + } + ], + "listeners": [], + "children": [ + { + "type": "Element", + "name": "h1", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 9, + "startColumn": 9, + "endLine": 9, + "endColumn": 32, + "start": 287, + "end": 310, + "startTag": { + "startLine": 9, + "startColumn": 9, + "endLine": 9, + "endColumn": 13, + "start": 287, + "end": 291 + }, + "endTag": { + "startLine": 9, + "startColumn": 27, + "endLine": 9, + "endColumn": 32, + "start": 305, + "end": 310 + } + }, + "attributes": [], + "properties": [], + "directives": [], + "listeners": [], + "children": [ + { + "type": "Text", + "raw": "else condition", + "value": { + "type": "Literal", + "value": "else condition" + }, + "location": { + "startLine": 9, + "startColumn": 13, + "endLine": 9, + "endColumn": 27, + "start": 291, + "end": 305 + } + } + ] + } + ] + } + ] + } + } + } + ] + } +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/config.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/config.json new file mode 100644 index 0000000000..e3593b237f --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/config.json @@ -0,0 +1,3 @@ +{ + "enableDynamicComponents": true +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/expected.js new file mode 100644 index 0000000000..bc8aa2d3cb --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/expected.js @@ -0,0 +1,54 @@ +import { parseFragment, registerTemplate } from "lwc"; +const $fragment1 = parseFragment`if condition`; +const $fragment2 = parseFragment`elseif condition`; +const $fragment3 = parseFragment`else condition`; +const stc0 = { + key: 1, +}; +const stc1 = { + key: 4, +}; +const stc2 = { + key: 7, +}; +function tmpl($api, $cmp, $slotset, $ctx) { + const { + st: api_static_fragment, + dc: api_dynamic_component, + fr: api_fragment, + } = $api; + return [ + $cmp.visible.if + ? api_fragment( + 0, + [ + api_dynamic_component($cmp.ctor1, stc0, [ + api_static_fragment($fragment1(), 3), + ]), + ], + 0 + ) + : $cmp.visible.elseif + ? api_fragment( + 0, + [ + api_dynamic_component($cmp.ctor2, stc1, [ + api_static_fragment($fragment2(), 6), + ]), + ], + 0 + ) + : api_fragment( + 0, + [ + api_dynamic_component($cmp.ctor3, stc2, [ + api_static_fragment($fragment3(), 9), + ]), + ], + 0 + ), + ]; + /*LWC compiler vX.X.X*/ +} +export default registerTemplate(tmpl); +tmpl.stylesheets = []; diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/metadata.json new file mode 100644 index 0000000000..51ec5f799c --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/metadata.json @@ -0,0 +1,3 @@ +{ + "warnings": [] +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-else/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-else/expected.js index ea77c14fa2..6d8086763a 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-else/expected.js +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-else/expected.js @@ -7,14 +7,20 @@ function tmpl($api, $cmp, $slotset, $ctx) { const { st: api_static_fragment, fr: api_fragment, - dc: api_dynamic_component, + ddc: api_deprecated_dynamic_component, } = $api; return [ $cmp.visible.if ? api_fragment(0, [api_static_fragment($fragment1(), 2)], 0) : api_fragment( 0, - [api_dynamic_component("x-foo", $cmp.trackedProp.foo, stc0)], + [ + api_deprecated_dynamic_component( + "x-foo", + $cmp.trackedProp.foo, + stc0 + ), + ], 0 ), ]; diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-else/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-else/metadata.json index 51ec5f799c..f0ebb05a3e 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-else/metadata.json +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-else/metadata.json @@ -1,3 +1,15 @@ { - "warnings": [] + "warnings": [ + { + "code": 1187, + "message": "LWC1187: The lwc:dynamic directive is deprecated and will be removed in a future release. Please use lwc:is instead.", + "level": 2, + "location": { + "line": 6, + "column": 9, + "start": 124, + "length": 45 + } + } + ] } \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else-nested/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else-nested/expected.js index 7419f0a850..3494c08b01 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else-nested/expected.js +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else-nested/expected.js @@ -12,7 +12,7 @@ function tmpl($api, $cmp, $slotset, $ctx) { const { st: api_static_fragment, fr: api_fragment, - dc: api_dynamic_component, + ddc: api_deprecated_dynamic_component, } = $api; return [ $cmp.outer.if @@ -30,7 +30,13 @@ function tmpl($api, $cmp, $slotset, $ctx) { : $cmp.inner.elseif2 ? api_fragment( 5, - [api_dynamic_component("x-foo", $cmp.trackedProp.foo, stc0)], + [ + api_deprecated_dynamic_component( + "x-foo", + $cmp.trackedProp.foo, + stc0 + ), + ], 0 ) : api_fragment(5, [api_static_fragment($fragment5(), 12)], 0), diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else-nested/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else-nested/metadata.json index 51ec5f799c..4a1051c415 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else-nested/metadata.json +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else-nested/metadata.json @@ -1,3 +1,15 @@ { - "warnings": [] + "warnings": [ + { + "code": 1187, + "message": "LWC1187: The lwc:dynamic directive is deprecated and will be removed in a future release. Please use lwc:is instead.", + "level": 2, + "location": { + "line": 16, + "column": 13, + "start": 460, + "length": 45 + } + } + ] } \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else/expected.js index f7072d9d04..1be908b04c 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else/expected.js +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else/expected.js @@ -8,7 +8,7 @@ function tmpl($api, $cmp, $slotset, $ctx) { const { st: api_static_fragment, fr: api_fragment, - dc: api_dynamic_component, + ddc: api_deprecated_dynamic_component, } = $api; return [ $cmp.visible.if @@ -17,7 +17,13 @@ function tmpl($api, $cmp, $slotset, $ctx) { ? api_fragment(0, [api_static_fragment($fragment2(), 4)], 0) : api_fragment( 0, - [api_dynamic_component("x-foo", $cmp.trackedProp.foo, stc0)], + [ + api_deprecated_dynamic_component( + "x-foo", + $cmp.trackedProp.foo, + stc0 + ), + ], 0 ), ]; diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else/metadata.json index 51ec5f799c..63e0878570 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else/metadata.json +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else/metadata.json @@ -1,3 +1,15 @@ { - "warnings": [] + "warnings": [ + { + "code": 1187, + "message": "LWC1187: The lwc:dynamic directive is deprecated and will be removed in a future release. Please use lwc:is instead.", + "level": 2, + "location": { + "line": 9, + "column": 9, + "start": 217, + "length": 45 + } + } + ] } \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-multiple/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-multiple/expected.js index 18fc0112f3..2517f86b50 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-multiple/expected.js +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-multiple/expected.js @@ -9,7 +9,7 @@ function tmpl($api, $cmp, $slotset, $ctx) { const { st: api_static_fragment, fr: api_fragment, - dc: api_dynamic_component, + ddc: api_deprecated_dynamic_component, } = $api; return [ $cmp.visible.if @@ -19,7 +19,13 @@ function tmpl($api, $cmp, $slotset, $ctx) { : $cmp.visible.elseif2 ? api_fragment( 0, - [api_dynamic_component("x-foo", $cmp.trackedProp.foo, stc0)], + [ + api_deprecated_dynamic_component( + "x-foo", + $cmp.trackedProp.foo, + stc0 + ), + ], 0 ) : api_fragment(0, [api_static_fragment($fragment3(), 7)], 0), diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-multiple/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-multiple/metadata.json index 51ec5f799c..c7362b8052 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-multiple/metadata.json +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-multiple/metadata.json @@ -1,3 +1,15 @@ { - "warnings": [] + "warnings": [ + { + "code": 1187, + "message": "LWC1187: The lwc:dynamic directive is deprecated and will be removed in a future release. Please use lwc:is instead.", + "level": 2, + "location": { + "line": 9, + "column": 9, + "start": 237, + "length": 45 + } + } + ] } \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif/expected.js index 7a836a714b..6c08cb607e 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif/expected.js +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif/expected.js @@ -7,7 +7,7 @@ function tmpl($api, $cmp, $slotset, $ctx) { const { st: api_static_fragment, fr: api_fragment, - dc: api_dynamic_component, + ddc: api_deprecated_dynamic_component, } = $api; return [ $cmp.visible.if @@ -15,7 +15,13 @@ function tmpl($api, $cmp, $slotset, $ctx) { : $cmp.visible.elseif ? api_fragment( 0, - [api_dynamic_component("x-foo", $cmp.trackedProp.foo, stc0)], + [ + api_deprecated_dynamic_component( + "x-foo", + $cmp.trackedProp.foo, + stc0 + ), + ], 0 ) : null, diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif/metadata.json index 51ec5f799c..cc9028eb74 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif/metadata.json +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif/metadata.json @@ -1,3 +1,15 @@ { - "warnings": [] + "warnings": [ + { + "code": 1187, + "message": "LWC1187: The lwc:dynamic directive is deprecated and will be removed in a future release. Please use lwc:is instead.", + "level": 2, + "location": { + "line": 6, + "column": 9, + "start": 143, + "length": 45 + } + } + ] } \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if/expected.js index 80d1b73935..55fd086ab1 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if/expected.js +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if/expected.js @@ -3,12 +3,18 @@ const stc0 = { key: 1, }; function tmpl($api, $cmp, $slotset, $ctx) { - const { dc: api_dynamic_component, fr: api_fragment } = $api; + const { ddc: api_deprecated_dynamic_component, fr: api_fragment } = $api; return [ $cmp.visible.if ? api_fragment( 0, - [api_dynamic_component("x-foo", $cmp.trackedProp.foo, stc0)], + [ + api_deprecated_dynamic_component( + "x-foo", + $cmp.trackedProp.foo, + stc0 + ), + ], 0 ) : null, diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if/metadata.json index 51ec5f799c..92b87527be 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if/metadata.json +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if/metadata.json @@ -1,3 +1,15 @@ { - "warnings": [] + "warnings": [ + { + "code": 1187, + "message": "LWC1187: The lwc:dynamic directive is deprecated and will be removed in a future release. Please use lwc:is instead.", + "level": 2, + "location": { + "line": 3, + "column": 9, + "start": 54, + "length": 45 + } + } + ] } \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/dynamic-components/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/dynamic-components/actual.html new file mode 100644 index 0000000000..3d25b24417 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/dynamic-components/actual.html @@ -0,0 +1,3 @@ + diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/dynamic-components/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/dynamic-components/ast.json new file mode 100644 index 0000000000..7405e6bd97 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/dynamic-components/ast.json @@ -0,0 +1,126 @@ +{ + "root": { + "type": "Root", + "location": { + "startLine": 1, + "startColumn": 1, + "endLine": 3, + "endColumn": 12, + "start": 0, + "end": 89, + "startTag": { + "startLine": 1, + "startColumn": 1, + "endLine": 1, + "endColumn": 11, + "start": 0, + "end": 10 + }, + "endTag": { + "startLine": 3, + "startColumn": 1, + "endLine": 3, + "endColumn": 12, + "start": 78, + "end": 89 + } + }, + "directives": [], + "children": [ + { + "type": "Lwc", + "name": "lwc:component", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 2, + "startColumn": 5, + "endLine": 2, + "endColumn": 67, + "start": 15, + "end": 77, + "startTag": { + "startLine": 2, + "startColumn": 5, + "endLine": 2, + "endColumn": 48, + "start": 15, + "end": 58 + }, + "endTag": { + "startLine": 2, + "startColumn": 51, + "endLine": 2, + "endColumn": 67, + "start": 61, + "end": 77 + } + }, + "attributes": [], + "properties": [], + "directives": [ + { + "type": "Directive", + "name": "Is", + "value": { + "type": "Identifier", + "start": 1, + "end": 5, + "name": "ctor", + "location": { + "startLine": 2, + "startColumn": 20, + "endLine": 2, + "endColumn": 33, + "start": 30, + "end": 43 + } + }, + "location": { + "startLine": 2, + "startColumn": 20, + "endLine": 2, + "endColumn": 33, + "start": 30, + "end": 43 + } + }, + { + "type": "Directive", + "name": "Ref", + "value": { + "type": "Literal", + "value": "foo" + }, + "location": { + "startLine": 2, + "startColumn": 34, + "endLine": 2, + "endColumn": 47, + "start": 44, + "end": 57 + } + } + ], + "listeners": [], + "children": [ + { + "type": "Text", + "raw": "Foo", + "value": { + "type": "Literal", + "value": "Foo" + }, + "location": { + "startLine": 2, + "startColumn": 48, + "endLine": 2, + "endColumn": 51, + "start": 58, + "end": 61 + } + } + ] + } + ] + } +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/dynamic-components/config.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/dynamic-components/config.json new file mode 100644 index 0000000000..e3593b237f --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/dynamic-components/config.json @@ -0,0 +1,3 @@ +{ + "enableDynamicComponents": true +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/dynamic-components/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/dynamic-components/expected.js new file mode 100644 index 0000000000..6e613e416f --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/dynamic-components/expected.js @@ -0,0 +1,13 @@ +import { registerTemplate } from "lwc"; +const stc0 = { + ref: "foo", + key: 0, +}; +function tmpl($api, $cmp, $slotset, $ctx) { + const { t: api_text, dc: api_dynamic_component } = $api; + return [api_dynamic_component($cmp.ctor, stc0, [api_text("Foo")])]; + /*LWC compiler vX.X.X*/ +} +export default registerTemplate(tmpl); +tmpl.stylesheets = []; +tmpl.hasRefs = true; diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/dynamic-components/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/dynamic-components/metadata.json new file mode 100644 index 0000000000..51ec5f799c --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/dynamic-components/metadata.json @@ -0,0 +1,3 @@ +{ + "warnings": [] +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/dynamic-components/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/dynamic-components/actual.html new file mode 100644 index 0000000000..ac2965b1e2 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/dynamic-components/actual.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/dynamic-components/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/dynamic-components/ast.json new file mode 100644 index 0000000000..14e83656db --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/dynamic-components/ast.json @@ -0,0 +1,119 @@ +{ + "root": { + "type": "Root", + "location": { + "startLine": 1, + "startColumn": 1, + "endLine": 3, + "endColumn": 12, + "start": 0, + "end": 91, + "startTag": { + "startLine": 1, + "startColumn": 1, + "endLine": 1, + "endColumn": 11, + "start": 0, + "end": 10 + }, + "endTag": { + "startLine": 3, + "startColumn": 1, + "endLine": 3, + "endColumn": 12, + "start": 80, + "end": 91 + } + }, + "directives": [], + "children": [ + { + "type": "Lwc", + "name": "lwc:component", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 2, + "startColumn": 5, + "endLine": 2, + "endColumn": 69, + "start": 15, + "end": 79, + "startTag": { + "startLine": 2, + "startColumn": 5, + "endLine": 2, + "endColumn": 53, + "start": 15, + "end": 63 + }, + "endTag": { + "startLine": 2, + "startColumn": 53, + "endLine": 2, + "endColumn": 69, + "start": 63, + "end": 79 + } + }, + "attributes": [], + "properties": [], + "directives": [ + { + "type": "Directive", + "name": "Is", + "value": { + "type": "Identifier", + "start": 1, + "end": 5, + "name": "ctor", + "location": { + "startLine": 2, + "startColumn": 20, + "endLine": 2, + "endColumn": 33, + "start": 30, + "end": 43 + } + }, + "location": { + "startLine": 2, + "startColumn": 20, + "endLine": 2, + "endColumn": 33, + "start": 30, + "end": 43 + } + }, + { + "type": "Directive", + "name": "Spread", + "value": { + "type": "Identifier", + "start": 1, + "end": 6, + "name": "hello", + "location": { + "startLine": 2, + "startColumn": 34, + "endLine": 2, + "endColumn": 52, + "start": 44, + "end": 62 + } + }, + "location": { + "startLine": 2, + "startColumn": 34, + "endLine": 2, + "endColumn": 52, + "start": 44, + "end": 62 + } + } + ], + "listeners": [], + "children": [] + } + ] + } +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/dynamic-components/config.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/dynamic-components/config.json new file mode 100644 index 0000000000..ff03540804 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/dynamic-components/config.json @@ -0,0 +1,4 @@ +{ + "enableDynamicComponents": true, + "enableLwcSpread": true +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/dynamic-components/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/dynamic-components/expected.js new file mode 100644 index 0000000000..8cc59e95e7 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/dynamic-components/expected.js @@ -0,0 +1,13 @@ +import { registerTemplate } from "lwc"; +function tmpl($api, $cmp, $slotset, $ctx) { + const { dc: api_dynamic_component } = $api; + return [ + api_dynamic_component($cmp.ctor, { + spread: $cmp.hello, + key: 0, + }), + ]; + /*LWC compiler vX.X.X*/ +} +export default registerTemplate(tmpl); +tmpl.stylesheets = []; diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/dynamic-components/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/dynamic-components/metadata.json new file mode 100644 index 0000000000..51ec5f799c --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/dynamic-components/metadata.json @@ -0,0 +1,3 @@ +{ + "warnings": [] +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/no-renderer-hook/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/no-renderer-hook/actual.html index 655517657f..632d4c7920 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/no-renderer-hook/actual.html +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/no-renderer-hook/actual.html @@ -1,4 +1,5 @@ \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/no-renderer-hook/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/no-renderer-hook/ast.json index 75033b1352..ea2dd848f9 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/no-renderer-hook/ast.json +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/no-renderer-hook/ast.json @@ -4,10 +4,10 @@ "location": { "startLine": 1, "startColumn": 1, - "endLine": 4, + "endLine": 5, "endColumn": 12, "start": 0, - "end": 179, + "end": 262, "startTag": { "startLine": 1, "startColumn": 1, @@ -17,12 +17,12 @@ "end": 10 }, "endTag": { - "startLine": 4, + "startLine": 5, "startColumn": 1, - "endLine": 4, + "endLine": 5, "endColumn": 12, - "start": 168, - "end": 179 + "start": 251, + "end": 262 } }, "directives": [], @@ -126,6 +126,93 @@ ], "listeners": [], "children": [] + }, + { + "type": "Lwc", + "name": "lwc:component", + "namespace": "http://www.w3.org/1999/xhtml", + "location": { + "startLine": 4, + "startColumn": 5, + "endLine": 4, + "endColumn": 83, + "start": 172, + "end": 250, + "startTag": { + "startLine": 4, + "startColumn": 5, + "endLine": 4, + "endColumn": 67, + "start": 172, + "end": 234 + }, + "endTag": { + "startLine": 4, + "startColumn": 67, + "endLine": 4, + "endColumn": 83, + "start": 234, + "end": 250 + } + }, + "attributes": [], + "properties": [], + "directives": [ + { + "type": "Directive", + "name": "Is", + "value": { + "type": "Identifier", + "start": 1, + "end": 12, + "name": "dynamicCtor", + "location": { + "startLine": 4, + "startColumn": 20, + "endLine": 4, + "endColumn": 40, + "start": 187, + "end": 207 + } + }, + "location": { + "startLine": 4, + "startColumn": 20, + "endLine": 4, + "endColumn": 40, + "start": 187, + "end": 207 + } + }, + { + "type": "Directive", + "name": "Spread", + "value": { + "type": "Identifier", + "start": 1, + "end": 13, + "name": "dynamicProps", + "location": { + "startLine": 4, + "startColumn": 41, + "endLine": 4, + "endColumn": 66, + "start": 208, + "end": 233 + } + }, + "location": { + "startLine": 4, + "startColumn": 41, + "endLine": 4, + "endColumn": 66, + "start": 208, + "end": 233 + } + } + ], + "listeners": [], + "children": [] } ] } diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/no-renderer-hook/config.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/no-renderer-hook/config.json index 551de7a1f7..ea1c34d3f6 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/no-renderer-hook/config.json +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/no-renderer-hook/config.json @@ -4,5 +4,6 @@ "directives": ["lwc:dynamic", "lwc:spread"], "elements": [] }, - "enableLwcSpread": true + "enableLwcSpread": true, + "enableDynamicComponents": true } diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/no-renderer-hook/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/no-renderer-hook/expected.js index 42c78b9cba..e3fe3b5331 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/no-renderer-hook/expected.js +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/no-renderer-hook/expected.js @@ -1,11 +1,16 @@ import { registerTemplate } from "lwc"; function tmpl($api, $cmp, $slotset, $ctx) { - const { dc: api_dynamic_component } = $api; + const { ddc: api_deprecated_dynamic_component, dc: api_dynamic_component } = + $api; return [ - api_dynamic_component("x-foo", $cmp.dynamicCtor, { + api_deprecated_dynamic_component("x-foo", $cmp.dynamicCtor, { spread: $cmp.dynamicProps, key: 0, }), + api_dynamic_component($cmp.dynamicCtor, { + spread: $cmp.dynamicProps, + key: 1, + }), ]; /*LWC compiler vX.X.X*/ } diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/no-renderer-hook/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/no-renderer-hook/metadata.json index 51ec5f799c..87679b8a7c 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/no-renderer-hook/metadata.json +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-spread/no-renderer-hook/metadata.json @@ -1,3 +1,15 @@ { - "warnings": [] + "warnings": [ + { + "code": 1187, + "message": "LWC1187: The lwc:dynamic directive is deprecated and will be removed in a future release. Please use lwc:is instead.", + "level": 2, + "location": { + "line": 3, + "column": 5, + "start": 100, + "length": 67 + } + } + ] } \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-config/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-config/actual.html new file mode 100644 index 0000000000..1a2cbcc72c --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-config/actual.html @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-config/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-config/ast.json new file mode 100644 index 0000000000..9e26dfeeb6 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-config/ast.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-config/config.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-config/config.json new file mode 100644 index 0000000000..30434d41eb --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-config/config.json @@ -0,0 +1,3 @@ +{ + "enableDynamicComponents": false +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-config/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-config/expected.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-config/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-config/metadata.json new file mode 100644 index 0000000000..e675208cc0 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-config/metadata.json @@ -0,0 +1,26 @@ +{ + "warnings": [ + { + "code": 1188, + "message": "LWC1188: Invalid dynamic components usage, lwc:component and lwc:is can only be used when dynamic components have been enabled.", + "level": 1, + "location": { + "line": 2, + "column": 5, + "start": 15, + "length": 45 + } + }, + { + "code": 1188, + "message": "LWC1188: Invalid dynamic components usage, lwc:component and lwc:is can only be used when dynamic components have been enabled.", + "level": 1, + "location": { + "line": 4, + "column": 5, + "start": 98, + "length": 73 + } + } + ] +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-is-directive-usage/elements/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-is-directive-usage/elements/actual.html new file mode 100644 index 0000000000..9bcd787b06 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-is-directive-usage/elements/actual.html @@ -0,0 +1,10 @@ + \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-is-directive-usage/elements/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-is-directive-usage/elements/ast.json new file mode 100644 index 0000000000..9e26dfeeb6 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-is-directive-usage/elements/ast.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-is-directive-usage/elements/config.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-is-directive-usage/elements/config.json new file mode 100644 index 0000000000..e3593b237f --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-is-directive-usage/elements/config.json @@ -0,0 +1,3 @@ +{ + "enableDynamicComponents": true +} \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-is-directive-usage/elements/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-is-directive-usage/elements/expected.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-is-directive-usage/elements/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-is-directive-usage/elements/metadata.json new file mode 100644 index 0000000000..f3963f5bb3 --- /dev/null +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/invalid/invalid-is-directive-usage/elements/metadata.json @@ -0,0 +1,37 @@ +{ + "warnings": [ + { + "code": 1186, + "message": "LWC1186: Invalid lwc:is usage for element . The directive can only be used with ", + "level": 1, + "location": { + "line": 3, + "column": 5, + "start": 43, + "length": 29 + } + }, + { + "code": 1186, + "message": "LWC1186: Invalid lwc:is usage for element
. The directive can only be used with ", + "level": 1, + "location": { + "line": 6, + "column": 5, + "start": 104, + "length": 25 + } + }, + { + "code": 1186, + "message": "LWC1186: Invalid lwc:is usage for element \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/invalid/slot-bind/invalid-on-non-slot-content/config.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/invalid/slot-bind/invalid-on-non-slot-content/config.json index 089a290bd4..5e1f9b07f2 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/invalid/slot-bind/invalid-on-non-slot-content/config.json +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/invalid/slot-bind/invalid-on-non-slot-content/config.json @@ -1,3 +1,5 @@ { - "enableScopedSlots": true + "enableScopedSlots": true, + "enableDynamicComponents": true, + "experimentalDynamicDirective": true } diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/invalid/slot-bind/invalid-on-non-slot-content/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/invalid/slot-bind/invalid-on-non-slot-content/metadata.json index 8cc4f39848..719a473d99 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/invalid/slot-bind/invalid-on-non-slot-content/metadata.json +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/invalid/slot-bind/invalid-on-non-slot-content/metadata.json @@ -43,6 +43,39 @@ "start": 121, "length": 78 } + }, + { + "code": 1187, + "message": "LWC1187: The lwc:dynamic directive is deprecated and will be removed in a future release. Please use lwc:is instead.", + "level": 2, + "location": { + "line": 7, + "column": 5, + "start": 204, + "length": 57 + } + }, + { + "code": 1171, + "message": "LWC1171: Invalid lwc:slot-bind usage on element . The directive can be used on a element only.", + "level": 1, + "location": { + "line": 7, + "column": 5, + "start": 204, + "length": 57 + } + }, + { + "code": 1171, + "message": "LWC1171: Invalid lwc:slot-bind usage on element . The directive can be used on a element only.", + "level": 1, + "location": { + "line": 8, + "column": 5, + "start": 266, + "length": 66 + } } ] } \ No newline at end of file diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/invalid/slot-data/invalid-on-non-slot-content/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/invalid/slot-data/invalid-on-non-slot-content/actual.html index d7369eed81..3afe87cc37 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/invalid/slot-data/invalid-on-non-slot-content/actual.html +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/invalid/slot-data/invalid-on-non-slot-content/actual.html @@ -3,6 +3,14 @@ {item.id} - {item.name} + + {item.id} - {item.name} + + + + {item.id} - {item.name} + + {item.id} - {item.name} diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/invalid/slot-data/invalid-on-non-slot-content/config.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/invalid/slot-data/invalid-on-non-slot-content/config.json index 089a290bd4..5e1f9b07f2 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/invalid/slot-data/invalid-on-non-slot-content/config.json +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/invalid/slot-data/invalid-on-non-slot-content/config.json @@ -1,3 +1,5 @@ { - "enableScopedSlots": true + "enableScopedSlots": true, + "enableDynamicComponents": true, + "experimentalDynamicDirective": true } diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/invalid/slot-data/invalid-on-non-slot-content/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/invalid/slot-data/invalid-on-non-slot-content/metadata.json index 1e56a3ccac..ba08fd36bf 100644 --- a/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/invalid/slot-data/invalid-on-non-slot-content/metadata.json +++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/invalid/slot-data/invalid-on-non-slot-content/metadata.json @@ -17,8 +17,8 @@ "level": 1, "location": { "line": 6, - "column": 11, - "start": 117, + "column": 34, + "start": 140, "length": 20 } }, @@ -28,8 +28,30 @@ "level": 1, "location": { "line": 10, + "column": 32, + "start": 260, + "length": 20 + } + }, + { + "code": 1176, + "message": "LWC1176: lwc:slot-data directive can be used on