Merge pull request #51 from solidjs-community/feature/allow-xmlns

Always allow xmlns and xlink namespaces

Author: joshwilsonvu

docs/no-unknown-namespaces.md

@@ -72,12 +72,19 @@ let el = <div prop:scrollTop="0px" />;
 
 let el = <div attr:title="title" />;
 
-/* eslint solid/no-unknown-namespaces: ["error", { "allowedNamespaces": ["xmlns"] }] */
 let el = (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink"
+  ></svg>
+);
+
+/* eslint solid/no-unknown-namespaces: ["error", { "allowedNamespaces": ["foo"] }] */
+let el = (
+  <bar
+    foo="http://www.w3.org/2000/svg"
+    version="1.1"
+    foo:bar="http://www.w3.org/1999/xlink"
   />
 );
 

docs/reactivity.md

@@ -410,6 +410,9 @@ function createFoo(v) {}
 const [bar, setBar] = createSignal();
 createFoo({ onBar: () => bar() });
 
+const [bar, setBar] = createSignal();
+X.createFoo(() => bar());
+
 const [signal, setSignal] = createSignal(1);
 const element = document.getElementById("id");
 element.addEventListener(
@@ -492,6 +495,16 @@ css`
 
 html`<div>${(props) => props.name}</div>`;
 
+styled.css`
+  color: ${(props) => props.color};
+`;
+
+createCss`color: ${props.color}`;
+
+styled.createCss`
+  color: ${props.color};
+`;
+
 function Component() {
   let canvas;
   return <canvas ref={canvas} />;

src/rules/no-unknown-namespaces.ts

@@ -3,6 +3,7 @@ import { isDOMElementName } from "../utils";
 
 const knownNamespaces = ["on", "oncapture", "use", "prop", "attr"];
 const styleNamespaces = ["style", "class"];
+const otherNamespaces = ["xmlns", "xlink"];
 
 const rule: TSESLint.RuleModule<
   "unknown" | "style" | "component" | "component-suggest",
@@ -71,7 +72,11 @@ const rule: TSESLint.RuleModule<
 
         const namespace = node.namespace?.name;
         if (
-          !(knownNamespaces.includes(namespace) || explicitlyAllowedNamespaces?.includes(namespace))
+          !(
+            knownNamespaces.includes(namespace) ||
+            otherNamespaces.includes(namespace) ||
+            explicitlyAllowedNamespaces?.includes(namespace)
+          )
         ) {
           if (styleNamespaces.includes(namespace)) {
             context.report({

test/rules/no-unknown-namespaces.test.ts

@@ -12,9 +12,10 @@ export const cases = run("no-unknown-namespaces", rule, {
     `let el = <div use:X />;`,
     `let el = <div prop:scrollTop="0px" />;`,
     `let el = <div attr:title="title" />;`,
+    `let el = <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>`,
     {
-      options: [{ allowedNamespaces: ["xmlns"] }],
-      code: `let el = <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" />`,
+      options: [{ allowedNamespaces: ["foo"] }],
+      code: `let el = <bar foo="http://www.w3.org/2000/svg" version="1.1" foo:bar="http://www.w3.org/1999/xlink" />`,
     },
   ],
   invalid: [