FormidableLabs · carloskelly13 · Feb 22, 2022 · Nov 17, 2021 · Feb 14, 2022 · Nov 22, 2021
diff --git a/.babelrc b/.babelrc
@@ -1,7 +1,8 @@
 {
   "presets": [
+    "@babel/preset-typescript",
     ["@babel/preset-env", { "modules": false }],
-    "@babel/preset-react"
+    ["@babel/preset-react", { "runtime": "automatic" }]
   ],
   "plugins": [
     "@babel/plugin-proposal-object-rest-spread",

diff --git a/.eslintrc b/.eslintrc
@@ -5,7 +5,7 @@
     "plugin:react/recommended",
     "plugin:prettier/recommended",
     "plugin:react-hooks/recommended",
-    "prettier/react"
+    "prettier"
   ],
   "plugins": [
     "prettier",
@@ -44,6 +44,16 @@
       {
         "allowTemplateLiterals": true
       }
-    ]
-  }
-}
+    ],
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off"
+  },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {
+        "react/prop-types": "off"
+      }
+    }
+  ]
+}
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -28,7 +28,6 @@ Please describe the tests that you ran to verify your changes. Provide instructi
 - [ ] I have performed a self-review of my own code
 - [ ] I have commented my code, particularly in hard-to-understand areas
 - [ ] I have made corresponding changes to the documentation
-- [ ] I have updated type definitions in `index.d.ts` for any breaking API changes
 - [ ] My code follows the style guidelines of this project (I have run `yarn format`)
 - [ ] I have added tests that prove my fix is effective or that my feature works
 - [ ] New and existing unit tests pass locally with my changes (I have run `yarn test`)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -13,6 +13,8 @@ on:
   pull_request:
     branches:
       - main
+      # TODO(v9): Remove when targeting branch at `main` for real release.
+      - v9
     paths:
       - '**'
       - '!docs/**'
@@ -23,7 +25,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [10.x, 12.x, 14.x, 15.x]
+        node-version: [12.x, 14.x, 16.x]
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2

diff --git a/.prettierignore b/.prettierignore
@@ -1,8 +1,10 @@
 yarn.lock
 package.json
+tsconfig.json
 node_modules
 es
 lib
 dist
+docs
 .nova
-.vscode
+.vscode
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,29 @@
 # Changelog
 
+## 9.0.0-beta.7
+
+- Ensured types for styled-system based components are included with Spectacle core
+
+## 9.0.0-beta.6
+
+- Fixed path for emitting type declarations
+
+## 9.0.0-beta.5
+
+- Removed dependency on Node assert
+
+## 9.0.0-beta.3
+
+- Added TypeScript development example
+
+## 9.0.0-beta.2
+
+- webpack 5 upgrade (@carlos-kelly)
+
+## 9.0.0-beta.1
+
+- Finished initial pass of TypeScript conversion (@scottrippey)
+
 ## 8.5.0
 
 - Add styled-system position and layout functions to CodePane, Progress, Markdown components [#1079](https://github.com/FormidableLabs/spectacle/pull/1079)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -168,8 +168,6 @@ ahead and submit a PR, make sure that you have done the following:
 - Run all checks using `yarn check-ci`.
 - Run `yarn build-one-page` and check + commit changes to `examples/one-page.html`
 - Check that both the core library and _all_ examples build: `yarn build && yarn build-examples`.
-- Update the [type definitions](./index.d.ts) for anything that modifies the Spectacle API,
-  like breaking changes or new features.
 - Everything else included in our [pull request checklist](.github/PULL_REQUEST_TEMPLATE.md).
 
 ### Releasing a new version to NPM

diff --git a/README.md b/README.md
@@ -24,3 +24,7 @@ Spectacle's documentation lives on our [docs site](https://www.formidable.com/op
 Notice something inaccurate or confusing? Feel free to [open an issue](https://github.com/FormidableLabs/spectacle/issues)
 or [make a pull request](https://github.com/FormidableLabs/spectacle/pulls) to help improve the documentation for everyone!
 The source for our docs site lives in this repo in the [`docs`](https://github.com/FormidableLabs/spectacle/blob/main/docs/README.md) folder.
+
+### Maintenance Status
+
+**Active:** Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.
diff --git a/docs/content/basic-concepts.md b/docs/content/basic-concepts.md
@@ -17,7 +17,7 @@ $ npm install --save spectacle
 
 ## Getting Started with Development
 
-The `src` directory contains all the source for the Spectacle library. All components designed to be part of the Spectacle API must be exported in `src/index.js`.
+The `src` directory contains all the source for the Spectacle library. All components designed to be part of the Spectacle API must be exported in `src/index.tsx`.
 
 #### JavaScript-based Decks
 

diff --git a/docs/content/faq.md b/docs/content/faq.md
@@ -15,4 +15,4 @@ For more info about the query parameters Spectacle supports, please check out ou
 
 ## Can I write my presentation in TypeScript?
 
-Yes - Spectacle types are shipped with the package, so you can safely use Spectacle in any `.ts` or `.js` presentation without a separate type definition import. Check out [the exported types](https://github.com/FormidableLabs/spectacle/blob/main/index.d.ts) for a complete list.
+Yes - Spectacle types are shipped with the package, so you can safely use Spectacle in any `.ts` or `.js` presentation without a separate type definition import.
diff --git a/docs/content/index.md b/docs/content/index.md
@@ -17,7 +17,7 @@ $ npm install --save spectacle
 
 ## Getting Started with Development
 
-The `src` directory contains all the source for the Spectacle library. All components designed to be part of the Spectacle API must be exported in `src/index.js`.
+The `src` directory contains all the source for the Spectacle library. All components designed to be part of the Spectacle API must be exported in `src/index.tsx`.
 
 #### JavaScript-based Decks
 

diff --git a/examples/js/index.js b/examples/js/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-
 import {
   FlexBox,
   Heading,
@@ -12,7 +11,6 @@ import {
   FullScreen,
   Progress,
   Appear,
-  Stepper,
   Slide,
   Deck,
   Text,
@@ -174,8 +172,6 @@ const Presentation = () => (
       <Grid
         gridTemplateColumns="1fr 1fr 1fr"
         gridTemplateRows="1fr 1fr 1fr"
-        alignItems="center"
-        justifyContent="center"
         gridRowGap={1}
       >
         {Array(9)
@@ -235,7 +231,6 @@ const Presentation = () => (
     </MarkdownSlide>
     <Slide>
       <Grid
-        flex={1}
         gridTemplateColumns="50% 50%"
         gridTemplateRows="50% 50%"
         height="100%"

diff --git a/examples/js/webpack.config.js b/examples/js/webpack.config.js
@@ -1,6 +1,5 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-
 const base = require('../../webpack.config');
 
 module.exports = {
@@ -14,12 +13,14 @@ module.exports = {
   },
   externals: {},
   plugins: [
+    ...base.plugins,
     new HtmlWebpackPlugin({
-      title: 'Spectacle JS Development Example',
+      title: 'Spectacle JavaScript Demo',
       template: `./index.html`
     })
   ],
   resolve: {
+    ...base.resolve,
     alias: {
       spectacle: path.resolve(__dirname, '../../src')
     }

diff --git a/examples/md/webpack.config.js b/examples/md/webpack.config.js
@@ -22,12 +22,14 @@ module.exports = {
     ])
   },
   plugins: [
+    ...base.plugins,
     new HtmlWebpackPlugin({
       title: 'Spectacle MD Development Example',
       template: `./index.html`
     })
   ],
   resolve: {
+    ...base.resolve,
     alias: {
       spectacle: path.resolve(__dirname, '../../src')
     }

diff --git a/examples/typescript/index.html b/examples/typescript/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,4 +15,4 @@ For more info about the query parameters Spectacle supports, please check out ou

		## Can I write my presentation in TypeScript?

		Yes - Spectacle types are shipped with the package, so you can safely use Spectacle in any `.ts` or `.js` presentation without a separate type definition import. Check out [the exported types](https://github.com/FormidableLabs/spectacle/blob/main/index.d.ts) for a complete list.
		Yes - Spectacle types are shipped with the package, so you can safely use Spectacle in any `.ts` or `.js` presentation without a separate type definition import.