✨ Initial PreactBaseElement

build-system/compile/bundles.config.js

@@ -489,7 +489,7 @@ exports.extensionBundles = [
   },
   {
     name: 'amp-date-display',
-    version: '0.1',
+    version: ['0.1', '0.2'],
     latestVersion: '0.1',
     type: TYPES.MISC,
   },

build-system/compile/check-for-unknown-deps.js

@@ -17,7 +17,7 @@
 
 const log = require('fancy-log');
 const through = require('through2');
-const {red, cyan} = require('ansi-colors');
+const {red, cyan, yellow} = require('ansi-colors');
 
 /**
  * Searches for the identifier "$$module$", which Closure uses to uniquely
@@ -44,6 +44,7 @@ exports.checkForUnknownDeps = function() {
       red('Error:'),
       `Unknown dependency ${cyan(match[0])} found in ${cyan(file.relative)}`
     );
+    log(yellow(contents));
     const err = new Error('Compilation failed due to unknown dependency');
     err.showStack = false;
     cb(err, file);

build-system/compile/compile.js

@@ -139,6 +139,7 @@ function compile(
     'third_party/web-animations-externs/web_animations.js',
     'third_party/moment/moment.extern.js',
     'third_party/react-externs/externs.js',
+    'build-system/externs/preact.extern.js',
   ];
   const define = [`VERSION=${internalRuntimeVersion}`];
   if (argv.pseudo_names) {

build-system/compile/sources.js

@@ -51,6 +51,10 @@ const COMMON_GLOBS = [
   'node_modules/@ampproject/animations/dist/animations.mjs',
   'node_modules/@ampproject/worker-dom/package.json',
   'node_modules/@ampproject/worker-dom/dist/amp/main.mjs',
+  'node_modules/preact/package.json',
+  'node_modules/preact/dist/*.js',
+  'node_modules/preact/hooks/package.json',
+  'node_modules/preact/hooks/dist/*.js',
 ];
 
 /**

build-system/eslint-rules/no-import.js

@@ -14,19 +14,41 @@
  * limitations under the License.
  */
 'use strict';
-const imports = ['sinon'];
+
+const imports = [
+  {import: 'sinon', message: 'Importing sinon is forbidden'},
+  {
+    import: 'preact',
+    message:
+      "Please import preact from 'src/preact'. This gives us type safety.",
+  },
+  {
+    import: 'preact/hooks',
+    message:
+      "Please import preact/hooks from 'src/preact'. This gives us type safety.",
+  },
+];
+
 module.exports = function(context) {
   return {
     ImportDeclaration(node) {
-      const comments = context.getCommentsBefore(node);
+      const comments = context.getCommentsBefore(node.source);
       const ok = comments.some(comment => comment.value === 'OK');
       if (ok) {
         return;
       }
 
       const name = node.source.value;
-      if (imports.includes(name)) {
-        context.report({node, message: `Importing ${name} is forbidden.`});
+
+      for (const forbidden of imports) {
+        if (name !== forbidden.import) {
+          continue;
+        }
+
+        context.report({
+          node,
+          message: forbidden.message,
+        });
       }
     },
   };

build-system/externs/preact.extern.js

@@ -0,0 +1,56 @@
+/**
+ * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/** @externs */
+
+/** @const */
+var Preact = {}
+
+/**
+ * @typedef {function(!JsonObject):Preact.Renderable}
+ */
+Preact.FunctionalComponent
+
+/**
+ * @interface
+ */
+Preact.VNode = function() {}
+
+/**
+ * @interface
+ */
+Preact.Context = function() {}
+
+/**
+ * @param {!JsonObject} props
+ * @return {Preact.Renderable}
+ */
+Preact.Context.prototype.Provider = function(props) {};
+
+/**
+ * @interface
+ */
+Preact.Context.prototype.Consumer = function() {};
+
+/**
+ * @typedef {string|number|boolean|null|undefined}
+ */
+Preact.SimpleRenderable;
+
+/**
+ * @typedef {Preact.SimpleRenderable|!Preact.VNode|!Array<Preact.SimpleRenderable|!Preact.VNode|!Array<Preact.SimpleRenderable|!Preact.VNode>>}
+ */
+Preact.Renderable;

build-system/tasks/check-types.js

@@ -82,7 +82,7 @@ async function checkTypes() {
           {
             include3pDirectories: true,
             includePolyfills: true,
-            extraGlobs: ['src/inabox/*.js'],
+            extraGlobs: ['src/inabox/*.js', '!node_modules/preact'],
             typeCheckOnly: true,
           }
         ),

examples/amp-date-display.amp.html

@@ -17,7 +17,7 @@
       overflow: auto;
     }
   </style>
-  <script async custom-element="amp-date-display" src="https://cdn.ampproject.org/v0/amp-date-display-0.1.js"></script>
+  <script async custom-element="amp-date-display" src="https://cdn.ampproject.org/v0/amp-date-display-0.2.js"></script>
   <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>

extensions/amp-date-display/0.2/amp-date-display.js

@@ -0,0 +1,97 @@
+/**
+ * Copyright 2019 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {AsyncRender} from './async-render';
+import {DateDisplay} from './date-display';
+import {Fragment, createElement} from '../../../src/preact';
+import {PreactBaseElement} from '../../../src/preact/base-element';
+import {RenderDomTree} from './render-dom-tree';
+import {Services} from '../../../src/services';
+import {dict} from '../../../src/utils/object';
+import {isExperimentOn} from '../../../src/experiments';
+import {isLayoutSizeDefined} from '../../../src/layout';
+import {userAssert} from '../../../src/log';
+
+/** @const {string} */
+const TAG = 'amp-date-display';
+
+class AmpDateDisplay extends PreactBaseElement {
+  /** @override */
+  init() {
+    const templates = Services.templatesFor(this.win);
+    let rendered = false;
+
+    return dict({
+      /**
+       * @param {!JsonObject} data
+       * @param {*} children
+       * @return {*}
+       */
+      'render': (data, children) => {
+        // We only render once in AMP mode, but React mode may rerender
+        // serveral times.
+        if (rendered) {
+          return children;
+        }
+        rendered = true;
+
+        const host = this.element;
+        const domPromise = templates
+          .findAndRenderTemplate(host, data)
+          .then(rendered => {
+            const container = document.createElement('div');
+            container.appendChild(rendered);
+
+            return createElement(RenderDomTree, {
+              'dom': container,
+              'host': host,
+            });
+          });
+        const asyncRender = createElement(AsyncRender, null, domPromise);
+        return createElement(Fragment, null, children, asyncRender);
+      },
+    });
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    userAssert(
+      isExperimentOn(this.win, 'amp-date-display-v2'),
+      'expected amp-date-display-v2 experiment to be enabled'
+    );
+    return isLayoutSizeDefined(layout);
+  }
+}
+
+/** @override */
+AmpDateDisplay.Component = DateDisplay;
+
+/** @override */
+AmpDateDisplay.passthrough = true;
+
+/** @override */
+AmpDateDisplay.props = {
+  'displayIn': {attr: 'display-in'},
+  'offsetSeconds': {attr: 'offset-seconds', type: 'number'},
+  'locale': {attr: 'locale'},
+  'datetime': {attr: 'datetime'},
+  'timestampMs': {attr: 'timestamp-ms', type: 'number'},
+  'timestampSeconds': {attr: 'timestamp-seconds', type: 'number'},
+};
+
+AMP.extension(TAG, '0.2', AMP => {
+  AMP.registerElement(TAG, AmpDateDisplay);
+});

extensions/amp-date-display/0.2/async-render.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright 2019 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {useResourcesNotify} from '../../../src/preact/utils';
+import {useState} from '../../../src/preact';
+
+/**
+ * Renders the children prop, waiting for it to resolve if it is a promise.
+ *
+ * @param {!JsonObject} props
+ * @return {Preact.Renderable}
+ */
+export function AsyncRender(props) {
+  const children = props['children'];
+  const {0: state, 1: set} = useState(children);
+  useResourcesNotify();
+
+  if (state && state.then) {
+    Promise.resolve(children).then(set);
+    return null;
+  }
+
+  return state;
+}