fix(vdom): svg's xlink attributes (#1890)

scripts/packages/build-conditionals/index.mjs

@@ -35,6 +35,7 @@ export const BUILD = {
   svg: true,
   updatable: true,
   vdomAttribute: true,
+  vdomXlink: true,
   vdomClass: true,
   vdomFunctional: true,
   vdomKey: true,

src/compiler/app-core/build-conditionals.ts

@@ -46,6 +46,7 @@ export function getBuildFeatures(cmps: d.ComponentCompilerMeta[]) {
     svg: cmps.some(c => c.htmlTagNames.includes('svg')),
     updatable: cmps.some(c => c.isUpdateable),
     vdomAttribute: cmps.some(c => c.hasVdomAttribute),
+    vdomXlink: cmps.some(c => c.hasVdomXlink),
     vdomClass: cmps.some(c => c.hasVdomClass),
     vdomFunctional: cmps.some(c => c.hasVdomFunctional),
     vdomKey: cmps.some(c => c.hasVdomKey),
@@ -69,6 +70,7 @@ export function updateComponentBuildConditionals(moduleMap: d.ModuleMap, cmps: d
       // if the component already has a boolean true value it'll keep it
       // otherwise we get the boolean value from the imported module
       cmp.hasVdomAttribute = cmp.hasVdomAttribute || importedModule.hasVdomAttribute;
+      cmp.hasVdomXlink = cmp.hasVdomXlink || importedModule.hasVdomXlink;
       cmp.hasVdomClass = cmp.hasVdomClass || importedModule.hasVdomClass;
       cmp.hasVdomFunctional = cmp.hasVdomFunctional || importedModule.hasVdomFunctional;
       cmp.hasVdomKey = cmp.hasVdomKey || importedModule.hasVdomKey;

src/compiler/browser/build-conditionals-client.ts

@@ -1,6 +1,6 @@
 import * as d from '../../declarations';
 
-export const BUILD: d.Build = {
+export const BUILD: Required<d.Build> = {
   allRenderFn: false,
   cmpDidLoad: true,
   cmpDidUnload: true,
@@ -9,6 +9,7 @@ export const BUILD: d.Build = {
   cmpWillLoad: true,
   cmpWillUpdate: true,
   cmpWillRender: true,
+  cmpShouldUpdate: true,
   connectedCallback: true,
   cssAnnotations: true,
   disconnectedCallback: true,
@@ -29,6 +30,9 @@ export const BUILD: d.Build = {
   observeAttribute: true,
   prop: true,
   propMutable: true,
+  propBoolean: true,
+  propNumber: true,
+  propString: true,
   reflect: true,
   scoped: true,
   shadowDom: true,
@@ -38,6 +42,7 @@ export const BUILD: d.Build = {
   svg: true,
   updatable: true,
   vdomAttribute: true,
+  vdomXlink: true,
   vdomClass: true,
   vdomFunctional: true,
   vdomKey: true,
@@ -52,6 +57,9 @@ export const BUILD: d.Build = {
   hotModuleReplacement: false,
   isDebug: false,
   isDev: false,
+  cssVarShim: false,
+  constructableCSS: true,
+  initializeNextTick: false,
   hydrateServerSide: false,
   hydrateClientSide: false,
   lifecycleDOMEvents: false,

src/compiler/build/compiler-ctx.ts

@@ -96,6 +96,7 @@ export const getModule = (config: d.Config, compilerCtx: d.CompilerCtx, sourceFi
       excludeFromCollection: false,
       externalImports: [],
       hasVdomAttribute: false,
+      hasVdomXlink: false,
       hasVdomClass: false,
       hasVdomFunctional: false,
       hasVdomKey: false,
@@ -131,15 +132,16 @@ export const resetModule = (moduleFile: d.Module) => {
   moduleFile.originalCollectionComponentPath = null;
   moduleFile.originalImports.length = 0;
 
-  moduleFile.hasVdomAttribute = true;
-  moduleFile.hasVdomClass = true;
-  moduleFile.hasVdomFunctional = true;
-  moduleFile.hasVdomKey = true;
-  moduleFile.hasVdomListener = true;
-  moduleFile.hasVdomRef = true;
+  moduleFile.hasVdomXlink = false;
+  moduleFile.hasVdomAttribute = false;
+  moduleFile.hasVdomClass = false;
+  moduleFile.hasVdomFunctional = false;
+  moduleFile.hasVdomKey = false;
+  moduleFile.hasVdomListener = false;
+  moduleFile.hasVdomRef = false;
   moduleFile.hasVdomRender = false;
-  moduleFile.hasVdomStyle = true;
-  moduleFile.hasVdomText = true;
+  moduleFile.hasVdomStyle = false;
+  moduleFile.hasVdomText = false;
   moduleFile.htmlAttrNames.length = 0;
   moduleFile.htmlTagNames.length = 0;
   moduleFile.potentialCmpRefs.length = 0;

src/compiler/config/validate-testing.ts

@@ -1,5 +1,4 @@
 import * as d from '../../declarations';
-import os from 'os';
 import { isOutputTargetDist, isOutputTargetWww } from '../output-targets/output-utils';
 import { buildError, buildWarn } from '@utils';
 
@@ -24,9 +23,6 @@ export function validateTesting(config: d.Config, diagnostics: d.Diagnostic[]) {
   testing.browserArgs = testing.browserArgs || [];
   addOption(testing.browserArgs, '--font-render-hinting=medium');
   addOption(testing.browserArgs, '--enable-font-antialiasing');
-  if (os.platform() === 'win32') {
-    addOption(testing.browserArgs, '--disable-gpu');
-  }
 
   if (config.flags.ci) {
     addOption(testing.browserArgs, '--no-sandbox');

src/compiler/transformers/collections/parse-collection-deprecated.ts

@@ -87,6 +87,7 @@ function parseComponentDeprecated(config: d.Config, compilerCtx: d.CompilerCtx,
     hasState: false,
     hasStyle: false,
     hasVdomAttribute: true,
+    hasVdomXlink: true,
     hasVdomClass: true,
     hasVdomFunctional: true,
     hasVdomKey: true,

src/compiler/transformers/static-to-meta/call-expression.ts

@@ -7,14 +7,14 @@ import ts from 'typescript';
 export const parseCallExpression = (m: d.Module | d.ComponentCompilerMeta, node: ts.CallExpression) => {
   if (node.arguments != null && node.arguments.length > 0) {
 
-    if (node.expression.kind === ts.SyntaxKind.Identifier) {
+    if (ts.isIdentifier(node.expression)) {
       // h('tag')
-      visitCallExpressionArgs(m, node.expression as ts.Identifier, node.arguments);
+      visitCallExpressionArgs(m, node.expression, node.arguments);
 
-    } else if (node.expression.kind === ts.SyntaxKind.PropertyAccessExpression) {
+    } else if (ts.isPropertyAccessExpression(node.expression)) {
       // document.createElement('tag')
-      if ((node.expression as ts.PropertyAccessExpression).name) {
-        visitCallExpressionArgs(m, (node.expression as ts.PropertyAccessExpression).name as ts.Identifier, node.arguments);
+      if (node.expression.name) {
+        visitCallExpressionArgs(m, node.expression.name, node.arguments);
       }
     }
   }

src/compiler/transformers/static-to-meta/component.ts

@@ -18,7 +18,7 @@ import { parseStringLiteral } from './string-literal';
 import ts from 'typescript';
 
 
-export const parseStaticComponentMeta = (config: d.Config, compilerCtx: d.CompilerCtx, transformCtx: ts.TransformationContext, typeChecker: ts.TypeChecker, cmpNode: ts.ClassDeclaration, moduleFile: d.Module, nodeMap: d.NodeMap, transformOpts: d.TransformOptions, fileCmpNodes: ts.ClassDeclaration[]) => {
+export const parseStaticComponentMeta = (config: d.Config, compilerCtx: d.CompilerCtx, typeChecker: ts.TypeChecker, cmpNode: ts.ClassDeclaration, moduleFile: d.Module, nodeMap: d.NodeMap, transformOpts: d.TransformOptions, fileCmpNodes: ts.ClassDeclaration[]) => {
   if (cmpNode.members == null) {
     return cmpNode;
   }
@@ -91,6 +91,7 @@ export const parseStaticComponentMeta = (config: d.Config, compilerCtx: d.Compil
     hasState: false,
     hasStyle: false,
     hasVdomAttribute: false,
+    hasVdomXlink: false,
     hasVdomClass: false,
     hasVdomFunctional: false,
     hasVdomKey: false,
@@ -107,16 +108,15 @@ export const parseStaticComponentMeta = (config: d.Config, compilerCtx: d.Compil
     potentialCmpRefs: []
   };
 
-  const visitComponentChildNode = (node: ts.Node): ts.VisitResult<ts.Node> => {
+  const visitComponentChildNode = (node: ts.Node) => {
     if (ts.isCallExpression(node)) {
       parseCallExpression(cmp, node);
     } else if (ts.isStringLiteral(node)) {
       parseStringLiteral(cmp, node);
     }
-    return ts.visitEachChild(node, visitComponentChildNode, transformCtx);
+    node.forEachChild(visitComponentChildNode);
   };
-  ts.visitEachChild(cmpNode, visitComponentChildNode, transformCtx);
-
+  visitComponentChildNode(cmpNode);
   parseClassMethods(cmpNode, cmp);
 
   cmp.legacyConnect.forEach(({connect}) => {

src/compiler/transformers/static-to-meta/vdom.ts

@@ -10,8 +10,10 @@ export const gatherVdomMeta = (m: d.Module | d.ComponentCompilerMeta, args: ts.N
   }
 
   if (args.length > 1) {
-    if (ts.isObjectLiteralExpression(args[1])) {
-      const props: ts.ObjectLiteralElementLike[] = ((args[1] as ts.ObjectLiteralExpression).properties as any);
+    const objectLiteral = args[1];
+
+    if (ts.isObjectLiteralExpression(objectLiteral)) {
+      const props = objectLiteral.properties;
 
       const propsWithText = props
         .filter(p => p.name && (p.name as any).text && (p.name as any).text.length > 0)
@@ -35,6 +37,9 @@ export const gatherVdomMeta = (m: d.Module | d.ComponentCompilerMeta, args: ts.N
             m.hasVdomListener = true;
             attrs.delete(attr);
           }
+          if (attr.startsWith('xlink')) {
+            m.hasVdomXlink = true;
+          }
         });
 
         if (attrs.size > 0) {

src/compiler/transformers/static-to-meta/visitor.ts

@@ -17,7 +17,7 @@ export const convertStaticToMeta = (config: d.Config, compilerCtx: d.CompilerCtx
 
     const visitNode = (node: ts.Node): ts.VisitResult<ts.Node> => {
       if (ts.isClassDeclaration(node)) {
-        return parseStaticComponentMeta(config, compilerCtx, transformCtx, typeChecker, node, moduleFile, compilerCtx.nodeMap, transformOpts, fileCmpNodes);
+        return parseStaticComponentMeta(config, compilerCtx, typeChecker, node, moduleFile, compilerCtx.nodeMap, transformOpts, fileCmpNodes);
       } else if (ts.isImportDeclaration(node)) {
         return parseImport(config, compilerCtx, buildCtx, moduleFile, dirPath, node);
       } else if (ts.isCallExpression(node)) {

src/declarations/build-conditionals.ts

@@ -22,6 +22,7 @@ export interface BuildFeatures {
   vdomRender: boolean;
   noVdomRender: boolean;
   vdomAttribute: boolean;
+  vdomXlink: boolean;
   vdomClass: boolean;
   vdomStyle: boolean;
   vdomKey: boolean;

src/declarations/component-compiler-meta.ts

@@ -37,6 +37,7 @@ export interface ComponentCompilerFeatures {
   hasState: boolean;
   hasStyle: boolean;
   hasVdomAttribute: boolean;
+  hasVdomXlink: boolean;
   hasVdomClass: boolean;
   hasVdomFunctional: boolean;
   hasVdomKey: boolean;

src/declarations/module.ts

@@ -14,15 +14,6 @@ export interface Module {
   dtsFilePath: string;
   excludeFromCollection: boolean;
   externalImports: string[];
-  hasVdomAttribute: boolean;
-  hasVdomClass: boolean;
-  hasVdomFunctional: boolean;
-  hasVdomKey: boolean;
-  hasVdomListener: boolean;
-  hasVdomRef: boolean;
-  hasVdomRender: boolean;
-  hasVdomStyle: boolean;
-  hasVdomText: boolean;
   htmlAttrNames: string[];
   htmlTagNames: string[];
   isCollectionDependency: boolean;
@@ -33,4 +24,16 @@ export interface Module {
   originalCollectionComponentPath: string;
   potentialCmpRefs: string[];
   sourceFilePath: string;
+
+  // build features
+  hasVdomAttribute: boolean;
+  hasVdomXlink: boolean;
+  hasVdomClass: boolean;
+  hasVdomFunctional: boolean;
+  hasVdomKey: boolean;
+  hasVdomListener: boolean;
+  hasVdomRef: boolean;
+  hasVdomRender: boolean;
+  hasVdomStyle: boolean;
+  hasVdomText: boolean;
 }

src/mock-doc/attribute.ts

@@ -115,7 +115,7 @@ export class MockAttr {
     return this._name;
   }
   set name(value) {
-    this._name = value.toLowerCase();
+    this._name = value;
   }
 
   get value() {

src/mock-doc/test/html-parse.spec.ts

@@ -80,6 +80,14 @@ describe('parseHtml', () => {
     `);
   });
 
+  it('svg attributes', () => {
+    doc = new MockDocument(`
+      <svg viewBox="0 0 100 100"></svg>
+    `);
+
+    expect(doc.body.firstElementChild.attributes.item(0).name).toEqual('viewBox');
+  });
+
   it('template', () => {
     doc = new MockDocument(`
       <template>text</template>

src/runtime/get-asset-path.ts

@@ -6,4 +6,3 @@ export const getAssetPath = (path: string) => {
     ? assetUrl.href
     : assetUrl.pathname;
 };
-