TypeScript: migrate templates package

packages/migration/src/types/story.ts

@@ -97,8 +97,8 @@ export interface PageV0 {
     ctaText?: string;
   };
   overlay: string;
-  autoAdvance: boolean;
-  defaultPageDuration: number;
+  autoAdvance?: boolean;
+  defaultPageDuration?: number;
 }
 
 export type StoryV0 = PageV0[];

packages/templates/package.json

@@ -27,12 +27,13 @@
   "type": "module",
   "customExports": {
     ".": {
-      "default": "./src/index.js"
+      "default": "./src/index.ts"
     }
   },
   "main": "dist/index.js",
   "module": "dist-module/index.js",
-  "source": "src/index.js",
+  "types": "dist-types/index.d.ts",
+  "source": "src/index.ts",
   "publishConfig": {
     "access": "public"
   },

packages/templates/src/getMetaData.js → packages/templates/src/getMetaData.ts

@@ -17,13 +17,18 @@
  * Internal dependencies
  */
 import { TEMPLATE_NAMES } from './constants';
+import type { MetaData } from './types';
 
-export function getTemplateMetaData() {
+type Data = {
+  default: MetaData;
+};
+
+export function getTemplateMetaData(): Promise<MetaData[]> {
   return Promise.all(
     TEMPLATE_NAMES.map((title) =>
       import(
-        /* webpackChunkName: "chunk-web-stories-template-[index]-metaData" */ `./raw/${title}/metaData.js`
-      ).then((data) => data.default)
+        /* webpackChunkName: "chunk-web-stories-template-[index]-metaData" */ `./raw/${title}/metaData.ts`
+      ).then((data: Data) => data.default)
     )
   );
 }

packages/templates/src/getTemplates.js → packages/templates/src/getTemplates.ts

@@ -24,43 +24,52 @@ import { DATA_VERSION, migrate } from '@googleforcreators/migration';
  * Internal dependencies
  */
 import { TEMPLATE_NAMES } from './constants';
+import type { RawTemplate, Template } from './types';
 
-async function loadTemplate(title, imageBaseUrl) {
-  const data = await import(
-    /* webpackChunkName: "chunk-web-stories-template-[index]" */ `./raw/${title}/index.js`
-  );
+type Data = {
+  default: RawTemplate;
+};
+
+async function loadTemplate(
+  title: string,
+  imageBaseUrl: string
+): Promise<Template> {
+  const data: Data = (await import(
+    /* webpackChunkName: "chunk-web-stories-template-[index]" */ `./raw/${title}/index.ts`
+  )) as Data;
 
   const template = {
     ...data.default,
     pages: (data.default.pages || []).map((page) => ({
       ...page,
       elements: page.elements?.map((elem) => {
-        if (elem?.resource?.sizes) {
-          elem.resource.sizes = [];
-        }
-        if (elem?.resource?.src) {
-          // imageBaseUrl (cdnURL) will always have a trailing slash,
-          // so make sure to avoid double slashes when replacing.
-          elem.resource.src = elem.resource.src.replace(
-            '__WEB_STORIES_TEMPLATE_BASE_URL__/',
-            imageBaseUrl
-          );
-        }
+        if ('resource' in elem && elem.resource) {
+          if ('sizes' in elem.resource && elem.resource.sizes) {
+            elem.resource.sizes = {};
+          }
+          if (elem.resource.src) {
+            // imageBaseUrl (cdnURL) will always have a trailing slash,
+            // so make sure to avoid double slashes when replacing.
+            elem.resource.src = elem.resource.src.replace(
+              '__WEB_STORIES_TEMPLATE_BASE_URL__/',
+              imageBaseUrl
+            );
+          }
 
-        if (elem?.resource?.poster) {
-          // imageBaseUrl (cdnURL) will always have a trailing slash,
-          // so make sure to avoid double slashes when replacing.
-          elem.resource.poster = elem.resource.poster.replace(
-            '__WEB_STORIES_TEMPLATE_BASE_URL__/',
-            imageBaseUrl
-          );
+          if ('poster' in elem.resource && elem.resource.poster) {
+            // imageBaseUrl (cdnURL) will always have a trailing slash,
+            // so make sure to avoid double slashes when replacing.
+            elem.resource.poster = elem.resource.poster.replace(
+              '__WEB_STORIES_TEMPLATE_BASE_URL__/',
+              imageBaseUrl
+            );
+          }
         }
-
         return elem;
       }),
     })),
 
-    postersByPage: data.default.pages.map((page, i) => {
+    postersByPage: data.default.pages.map((_, i) => {
       const srcPath = `${imageBaseUrl}images/templates/${
         data.default.slug
       }/posters/${i + 1}`;
@@ -73,12 +82,12 @@ async function loadTemplate(title, imageBaseUrl) {
   };
 
   return {
-    ...migrate(template, template.version),
+    ...(migrate(template, template.version) as unknown as Template),
     version: DATA_VERSION,
-  };
+  } as Template;
 }
 
-async function getTemplates(imageBaseUrl) {
+async function getTemplates(imageBaseUrl: string) {
   const trackTiming = getTimeTracker('load_templates');
 
   const templates = await Promise.all(

packages/templates/src/index.js → packages/templates/src/index.ts

@@ -19,10 +19,15 @@
  */
 import memoize from './utils/memoize';
 import getTemplates from './getTemplates';
+import type { Template } from './types';
 
 const memoizedGetTemplates = memoize(getTemplates);
 
-export async function getAllTemplates({ cdnURL }) {
+export async function getAllTemplates({
+  cdnURL,
+}: {
+  cdnURL: string;
+}): Promise<Template[]> {
   const templates = await memoizedGetTemplates(cdnURL);
 
   const globalConfig = {

packages/templates/src/raw/12-hours-in-barcelona/index.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * 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
+ *
+ *     https://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.
+ */
+
+/**
+ * Internal dependencies
+ */
+import type { RawTemplate } from '../../types';
+// For some reason, the inferred TypeScript type is too narrow here and we have to use
+// file declaration instead of importing directly from `template.json`.
+import { default as template } from './template';
+import { default as metaData } from './metaData';
+
+export default {
+  ...metaData,
+  ...template,
+} as RawTemplate;

packages/templates/src/raw/12-hours-in-barcelona/metaData.js → packages/templates/src/raw/12-hours-in-barcelona/metaData.ts

@@ -18,6 +18,11 @@
  */
 import { __, _x } from '@googleforcreators/i18n';
 
+/**
+ * Internal dependencies
+ */
+import type { MetaData } from '../../types';
+
 export default {
   slug: '12-hours-in-barcelona',
   creationDate: '2021-07-12T00:00:00.000Z',
@@ -56,4 +61,4 @@ export default {
     'web-stories'
   ),
   vertical: _x('Travel', 'template vertical', 'web-stories'),
-};
+} as MetaData;

packages/templates/src/raw/12-hours-in-barcelona/template.d.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * 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
+ *
+ *     https://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 type { TemplateData } from '../../types';
+
+declare module 'template.json' {
+  const templateStory: TemplateData;
+  export default templateStory;
+}

packages/templates/src/raw/album-releases/index.js → packages/templates/src/raw/a-day-in-the-life/index.ts

@@ -17,10 +17,11 @@
 /**
  * Internal dependencies
  */
+import type { RawTemplate } from '../../types';
 import { default as template } from './template';
 import { default as metaData } from './metaData';
 
 export default {
   ...metaData,
   ...template,
-};
+} as RawTemplate;

packages/templates/src/raw/a-day-in-the-life/metaData.js → packages/templates/src/raw/a-day-in-the-life/metaData.ts

@@ -19,6 +19,11 @@
  */
 import { __, _x } from '@googleforcreators/i18n';
 
+/**
+ * Internal dependencies
+ */
+import type { MetaData } from '../../types';
+
 export default {
   slug: 'a-day-in-the-life',
   creationDate: '2021-07-12T00:00:00.000Z',
@@ -52,4 +57,4 @@ export default {
     'web-stories'
   ),
   vertical: _x('Entertainment', 'template vertical', 'web-stories'),
-};
+} as MetaData;

packages/templates/src/raw/a-day-in-the-life/template.d.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * 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
+ *
+ *     https://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 type { TemplateData } from '../../types';
+
+declare module 'template.json' {
+  const templateStory: TemplateData;
+  export default templateStory;
+}

packages/templates/src/raw/a-day-in-the-life/index.js → packages/templates/src/raw/ace-hotel-kyoto-review/index.ts

@@ -17,10 +17,11 @@
 /**
  * Internal dependencies
  */
+import type { RawTemplate } from '../../types';
 import { default as template } from './template';
 import { default as metaData } from './metaData';
 
 export default {
   ...metaData,
   ...template,
-};
+} as RawTemplate;

packages/templates/src/raw/ace-hotel-kyoto-review/metaData.js → packages/templates/src/raw/ace-hotel-kyoto-review/metaData.ts

@@ -19,6 +19,11 @@
  */
 import { __, _x } from '@googleforcreators/i18n';
 
+/**
+ * Internal dependencies
+ */
+import type { MetaData } from '../../types';
+
 export default {
   slug: 'ace-hotel-kyoto-review',
   creationDate: '2021-07-29T00:00:00.000Z',
@@ -67,4 +72,4 @@ export default {
     'web-stories'
   ),
   vertical: _x('Travel', 'template vertical', 'web-stories'),
-};
+} as MetaData;

packages/templates/src/raw/ace-hotel-kyoto-review/template.d.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * 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
+ *
+ *     https://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 type { TemplateData } from '../../types';
+
+declare module 'template.json' {
+  const templateStory: TemplateData;
+  export default templateStory;
+}

packages/templates/src/raw/ace-hotel-kyoto-review/index.js → packages/templates/src/raw/album-releases/index.ts

@@ -17,10 +17,11 @@
 /**
  * Internal dependencies
  */
+import type { RawTemplate } from '../../types';
 import { default as template } from './template';
 import { default as metaData } from './metaData';
 
 export default {
   ...metaData,
   ...template,
-};
+} as RawTemplate;

packages/templates/src/raw/album-releases/metaData.js → packages/templates/src/raw/album-releases/metaData.ts

@@ -19,6 +19,11 @@
  */
 import { __, _x } from '@googleforcreators/i18n';
 
+/**
+ * Internal dependencies
+ */
+import type { MetaData } from '../../types';
+
 export default {
   slug: 'album-releases',
   creationDate: '2021-06-28T00:00:00.000Z',
@@ -57,4 +62,4 @@ export default {
     'web-stories'
   ),
   vertical: _x('Music', 'template vertical', 'web-stories'),
-};
+} as MetaData;

packages/templates/src/raw/album-releases/template.d.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * 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
+ *
+ *     https://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 type { TemplateData } from '../../types';
+
+declare module 'template.json' {
+  const templateStory: TemplateData;
+  export default templateStory;
+}