support preact X (prateekbh#1334)

* support preact X

* fixing preact X support

* bumping cli

* fixing highlighter

* fixing highlighter

* fixing name

* fixing tests

* lint fixes

docs/package.json

@@ -7,7 +7,7 @@
     "prebuild": "cd node_modules/preact-cli",
     "build": "preact build",
     "prebuild:prod": "cd node_modules/preact-cli",
-    "build:prod": "preact build --template template.html --esm --preload && npm run copyAssets",
+    "build:prod": "preact build --preload && npm run copyAssets",
     "copyAssets": "cpx -v '{*.png,manifest.json,prerender-urls.json}' build && cpx -v 'images/**' build/images/",
     "serve": "preact build && preact serve",
     "dev": "preact watch",
@@ -44,9 +44,13 @@
     "highlight.js": "^9.12.0",
     "if-env": "^1.0.0",
     "mocha": "^5.0.1",
+    "ncp": "^2.0.0",
     "node-sass": "^4.9.3",
     "node-static": "^0.7.11",
-    "preact-cli": "^3.0.0-next.14",
+    "preact": "^10.0.0-rc.1",
+    "preact-cli": "3.0.0-rc.5",
+    "preact-render-to-string": "^4.1.0",
+    "preact-router": "^3.0.1",
     "rimraf": "^2.6.2",
     "sass-loader": "^7.0.1",
     "shelljs": "^0.8.1"

docs/src/components/code-block/index.js

@@ -15,11 +15,10 @@ Object.keys(LANGUAGES).forEach(key =>
 
 // Class
 export default ({children, ...props}) => {
-  let child = children && children[0],
-    isHighlight = child && child.nodeName === 'code';
+  let isHighlight = children && children.type === 'code';
   if (isHighlight) {
-    let text = child.children[0].replace(/(^\s+|\s+$)/g, ''),
-      lang = (child.attributes.class && child.attributes.class).match(
+    let text = children.props.children.replace(/(^\s+|\s+$)/g, ''),
+      lang = children.props.class.match(
         /lang-([a-z]+)/
       )[1],
       highlighted = hljs.highlightAuto(text, lang ? [lang] : null),

docs/src/components/original-documentation/index.js

@@ -3,15 +3,14 @@ import {h} from 'preact';
 
 // Class
 export default ({children, ...props}) => {
-  let child = children && children[0];
   let orgDocUrl = `https://material.io/develop/web/components/${props.link}`;
 
   return (
     <div>
       <div className="mdc-typography--display1">Original documentation</div>
       <div className="mdc-typography--body">
-        This component encapsulates <span className="strong">{child}</span>, you
-        can refer to its documentation <a href={orgDocUrl}>here</a>.
+        This component encapsulates <span className="strong">{children}</span>,
+        you can refer to its documentation <a href={orgDocUrl}>here</a>.
       </div>
     </div>
   );

docs/src/components/sample-code-block/index.js

@@ -6,12 +6,11 @@ import sample from '../../routes/card/sample.txt';
 
 // Class
 export default ({children}) => {
-  let child = children && children[0];
   return (
     <div>
       <div className="mdc-typography--display1">Sample code</div>
       <CodeBlock>
-        <code class="lang-js">{child}</code>
+        <code class="lang-js">{children}</code>
       </CodeBlock>
     </div>
   );

ts/Base/MaterialComponent.ts

@@ -76,9 +76,18 @@ export abstract class MaterialComponent<
     }
 
     const element = this.materialDom(componentProps);
-    element.attributes = element.attributes || {};
+    let propName = 'attributes';
+
+    if ('props' in element) {
+      propName = 'props';
+      // @ts-ignore
+      element.props = element.props || {};
+    } else {
+      element.attributes = element.attributes || {};
+    }
 
-    element.attributes.className = `${userDefinedClasses} ${this.getClassName(
+    // @ts-ignore
+    element[propName].className = `${userDefinedClasses} ${this.getClassName(
       element
     )}`
       .split(' ')
@@ -92,7 +101,8 @@ export abstract class MaterialComponent<
       if (prop in doNotRemoveProps) {
         return;
       }
-      delete element.attributes[prop];
+      // @ts-ignore
+      delete element[propName][prop];
     });
     return element;
   }
@@ -167,7 +177,18 @@ export abstract class MaterialComponent<
     if (!element) {
       return '';
     }
-    const attrs = (element.attributes = element.attributes || {});
+    let propName = 'attributes';
+
+    if ('props' in element) {
+      propName = 'props';
+      // @ts-ignore
+      element.props = element.props || {};
+    } else {
+      element.attributes = element.attributes || {};
+    }
+
+    // @ts-ignore
+    const attrs = (element[propName] = element[propName] || {});
     let classText = this.classText;
     if (attrs.class) {
       classText += ' ' + attrs.class;

ts/Drawer/index.tsx

@@ -68,7 +68,9 @@ export class DrawerItem extends ListLinkItem<
     const returnedNode = super.materialDom(props);
     /* Logic to add selected class */
     if (props.selected) {
-      returnedNode.attributes.className = 'mdc-list-item--activated';
+      // @ts-ignore
+      (returnedNode.props || returnedNode.attributes).className =
+        'mdc-list-item--activated';
     }
     return returnedNode;
   }

ts/LayoutGrid/index.tsx

@@ -97,7 +97,11 @@ export class LayoutGridCell extends MaterialComponent<
     const element = super.render(props);
     // remove the extra attributes used for customising this element - keep the DOM clean
     Object.keys(LayoutGridCell.propsDict).forEach(
-      key => delete element.attributes[LayoutGridCell.propsDict[key]]
+      key =>
+        // @ts-ignore
+        delete (element.props || element.attributes)[
+          LayoutGridCell.propsDict[key]
+        ]
     );
     return element;
   }