Merge remote-tracking branch 'origin/master' into next-datastore-docs

Readme.md

@@ -201,3 +201,7 @@ let mut a = String::from("a");
 
 </amplify-block-switcher>
 ````
+
+### Adding to Valid Tag List
+
+Markdown parsers don't handle `<whatever>` very well. If you intended to write what the parser interprets as usage of an element / web component, navigate to `capi/src/init-node/valid-tags.json` and add a new entry for your tag. If you meant for `<whatever>` to be text, you'll need to escape it with a backslash (`\<whatever\>`). Please confirm that this renders properly before PRing with your changes.

capi/src/init-node/html-to-hyperscript.ts

@@ -1,7 +1,9 @@
-// eslint-disable-next-line
+import * as path from "path";
 // @ts-ignore
 import * as parse5 from "parse5";
 import * as t from "../types";
+import validTags from "./valid-tags.json";
+import {Ctx} from "../types/ctx";
 
 interface HTMLAttr {
   name: string;
@@ -33,22 +35,51 @@ const Attrs = (attrs: HTMLAttr[]): Record<string, unknown> | null => {
 };
 
 const Hyperscript = (
+  ctx: Ctx,
   node: HTMLNode,
   attributes: t.Page,
   srcPath: string,
 ): t.HyperscriptNode | t.Falsy => {
   if (node.nodeName === "#text") {
     return node.value as string;
   }
+
+  if (node.nodeName === "#comment") {
+    return null;
+  }
+
+  if (node.tagName) {
+    if (!validTags[node.tagName] && !node.tagName.startsWith("amplify-")) {
+      throw new Error(
+        `Invalid tag "${
+          node.tagName
+        }" encountered in "${srcPath}". See instructions on adding valid tags at "${path.resolve(
+          ctx.config.cwd as string,
+          "Readme.md#adding-to-valid-tag-list",
+        )}"`,
+      );
+    }
+  } else {
+    throw new Error(
+      `Undefined is not a valid tag name, encountered in "${srcPath}". No info:\n${node}`,
+    );
+  }
+
   const props = node.attrs ? Attrs(node.attrs) : null;
   if (props?.style) {
     throw new Error(`'style' attribute used in "${srcPath}"`);
   }
+
   const children =
     node.childNodes && node.childNodes.length > 0
       ? // eslint-disable-next-line
       node.childNodes.reduce((acc: any, childNode: any) => {
-          const hyperscriptNode = Hyperscript(childNode, attributes, srcPath);
+          const hyperscriptNode = Hyperscript(
+            ctx,
+            childNode,
+            attributes,
+            srcPath,
+          );
           switch (hyperscriptNode) {
             case undefined:
             case null:
@@ -59,6 +90,7 @@ const Hyperscript = (
           }
         }, new Array<t.HyperscriptNode>())
       : new Array<t.HyperscriptNode>();
+
   const hyperscriptNode = [
     node.tagName,
     props,
@@ -90,6 +122,7 @@ const Hyperscript = (
  * Turns an HTML source string into an array of Hyperscript nodes
  */
 export const htmlToHyperscript = (
+  ctx: Ctx,
   html: string,
   srcPath: string,
   attributes: t.Page,
@@ -99,6 +132,6 @@ export const htmlToHyperscript = (
   return parse5
     .parseFragment(html, {scriptingEnabled: true})
     .childNodes?.map((node: HTMLNode) =>
-      Hyperscript(node, attributes, srcPath),
+      Hyperscript(ctx, node, attributes, srcPath),
     );
 };

capi/src/init-node/index.ts

@@ -87,7 +87,7 @@ export async function initNode(srcPath: string, ctx: t.Ctx): Promise<void> {
       const contents = (await fs.readFile(srcPath)).toString();
       const {body: markdownBody, attributes} = fm<t.Page>(contents);
       const htmlBody = marked(markdownBody);
-      const body = htmlToHyperscript(htmlBody, srcPath, attributes);
+      const body = htmlToHyperscript(ctx, htmlBody, srcPath, attributes);
       // @ts-ignore
       if (attributes.disableLinkification) {
         // @ts-ignore
@@ -111,7 +111,9 @@ export async function initNode(srcPath: string, ctx: t.Ctx): Promise<void> {
           );
         }
         ctx.pageBySrcPath.set(srcPath, {
+          // @ts-ignore
           route: pathDeduction.route,
+          // @ts-ignore
           body,
           ...attributes,
         });

capi/src/init-node/valid-tags.json

@@ -0,0 +1,56 @@
+{
+  "a": true,
+  "amplify-block": true,
+  "amplify-block-switcher": true,
+  "amplify-callout": true,
+  "amplify-code-block": true,
+  "amplify-confirm-sign-in": true,
+  "amplify-confirm-sign-up": true,
+  "amplify-container": true,
+  "amplify-forgot-password": true,
+  "amplify-greetings": true,
+  "amplify-require-new-password": true,
+  "amplify-responsive-grid": true,
+  "amplify-sign-in": true,
+  "amplify-sign-out": true,
+  "amplify-sign-up": true,
+  "b": true,
+  "blockquote": true,
+  "br": true,
+  "code": true,
+  "div": true,
+  "docs-card": true,
+  "docs-component-playground": true,
+  "docs-container": true,
+  "docs-filter": true,
+  "docs-footer": true,
+  "docs-hero": true,
+  "docs-internal-link-button": true,
+  "docs-landing-hero-cta": true,
+  "docs-link-banner": true,
+  "em": true,
+  "h1": true,
+  "h2": true,
+  "h3": true,
+  "h4": true,
+  "h5": true,
+  "hr": true,
+  "iframe": true,
+  "img": true,
+  "inline-fragment": true,
+  "li": true,
+  "ol": true,
+  "p": true,
+  "pre": true,
+  "span": true,
+  "strong": true,
+  "table": true,
+  "tbody": true,
+  "td": true,
+  "tds": true,
+  "th": true,
+  "thead": true,
+  "tr": true,
+  "ui-component-props": true,
+  "ul": true
+}

capi/src/types/config.ts

@@ -4,8 +4,8 @@ export interface Config {
   exclude?: string[];
   filters: Readonly<Record<Readonly<string>, Readonly<Readonly<string>[]>>>;
   hooks?: {
-    onTargetsWritten?: () => {};
-    onWatching?: () => {};
+    onTargetsWritten?: () => void;
+    onWatching?: () => void;
   };
   outDir: string;
   publicDir: string;

capi/tsconfig.json

@@ -1,9 +1,10 @@
 {
   "compilerOptions": {
+    "downlevelIteration": true,
     "lib": ["dom", "es2018", "es2018.AsyncIterable"],
     "outDir": "lib",
-    "typeRoots": ["node_modules/@types", "../node_modules/@types"],
-    "downlevelIteration": true
+    "resolveJsonModule": true,
+    "typeRoots": ["node_modules/@types", "../node_modules/@types"]
   },
   "extends": "../tsconfig.base.json",
   "include": ["src"]

client/prerender.config.ts

@@ -0,0 +1,25 @@
+import {PrerenderConfig} from "@stencil/core";
+import {routes as entryUrls} from "./src/api/routes";
+
+export const config: PrerenderConfig = {
+  crawlUrls: false,
+  entryUrls,
+  hydrateOptions() {
+    return {
+      addModulePreloads: true,
+      removeUnusedStyles: true,
+      minifyStyleElements: true,
+      minifyScriptElements: true,
+      removeAttributeQuotes: true,
+      removeBooleanAttributeQuotes: true,
+      removeEmptyAttributes: true,
+      removeHtmlComments: true,
+      maxHydrateCount: 2000,
+      runtimeLogging: true,
+      timeout: 1000000,
+    };
+  },
+  filterUrl(url) {
+    return !!(url && entryUrls.includes(url.pathname) && url.pathname !== "/");
+  },
+};

client/src/amplify-ui/sidebar-layout/sidebar-layout-main/__snapshots__/sidebar-layout-main.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`amplify-sidebar-layout-main Render logic should render 1`] = `
-<amplify-sidebar-layout-main class="css-1ec8p0w in-view">
+<amplify-sidebar-layout-main class="css-h51tzz in-view">
   <!---->
   <div></div>
 </amplify-sidebar-layout-main>

client/src/amplify-ui/sidebar-layout/sidebar-layout-main/sidebar-layout-main.style.ts

@@ -23,7 +23,7 @@ export const sidebarLayoutMainStyle = css`
 
     ${MQFablet} {
       min-width: initial;
-      padding: 0 3rem;
+      padding: 0 2.5rem;
     }
   }
 `;