fix(v2): make proper path to pages in TS (#2334)

facebook · Feb 27, 2020 · 68a5cd5 · 68a5cd5
1 parent 590de95
commit 68a5cd5
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 1 deletion.
diff --git a/...cusaurus-plugin-content-pages/src/__tests__/__fixtures__/website/src/pages/typescript.tsx b/...cusaurus-plugin-content-pages/src/__tests__/__fixtures__/website/src/pages/typescript.tsx
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import Head from '@docusaurus/Head';
+
+export default class Home extends React.Component {
+  render() {
+    return (
+      <div>
+        <Head>
+          <title>Hello</title>
+        </Head>
+        <div>TypeScript...</div>
+      </div>
+    );
+  }
+}
diff --git a/packages/docusaurus-plugin-content-pages/src/__tests__/index.test.ts b/packages/docusaurus-plugin-content-pages/src/__tests__/index.test.ts
@@ -33,6 +33,10 @@ describe('docusaurus-plugin-content-pages', () => {
         permalink: '/',
         source: path.join('@site', pluginPath, 'index.js'),
       },
+      {
+        permalink: '/typescript',
+        source: path.join('@site', pluginPath, 'typescript.tsx'),
+      },
       {
         permalink: '/hello/world',
         source: path.join('@site', pluginPath, 'hello', 'world.js'),

diff --git a/packages/docusaurus-utils/src/index.ts b/packages/docusaurus-utils/src/index.ts
@@ -61,7 +61,7 @@ export function objectWithKeySorted(obj: Object) {
 }
 
 const indexRE = /(^|.*\/)index\.(md|js|jsx|ts|tsx)$/i;
-const extRE = /\.(md|js)$/;
+const extRE = /\.(md|js|tsx)$/;
 
 /**
  * Convert filepath to url path.

diff --git a/website/docs/creating-pages.md b/website/docs/creating-pages.md
@@ -41,6 +41,12 @@ Once you save the file, the development server will automatically reload the cha
 
 Each page doesn't come with any styling. You will need to import the `Layout` component from `@theme/Layout` and wrap your contents within that component if you want the navbar and/or footer to appear.
 
+:::tip
+
+You can also create a page in TypeScript, in which case the its file name should use the `.tsx` extension, eg. `hello.tsx`.
+
+:::
+
 ## Routing
 
 If you are familiar with other static site generators like Jekyll and Next, this routing approach will feel familiar to you. Any JavaScript file you create under `/src/pages/` directory will be automatically converted to a website page, following the `/src/pages/` directory hierarchy. For example: