From 3f67f708f0cff1c700d4130e2ab1cc33374c5fda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABtan=20Maisse?= Date: Mon, 14 Dec 2020 17:03:14 +0100 Subject: [PATCH] refactor(marionette): migrate to TS --- app/marionette/package.json | 2 + .../src/client/{index.js => index.ts} | 0 .../{element_check.js => element_check.ts} | 4 +- .../client/preview/{globals.js => globals.ts} | 0 .../src/client/preview/{index.js => index.ts} | 5 ++- .../client/preview/{render.js => render.ts} | 18 ++++++-- .../src/server/{build.js => build.ts} | 0 .../src/server/framework-preset-marionette.js | 3 -- .../src/server/framework-preset-marionette.ts | 6 +++ .../src/server/{index.js => index.ts} | 0 .../src/server/{options.js => options.ts} | 0 app/marionette/src/typings.d.ts | 2 + app/marionette/tsconfig.json | 7 +++ yarn.lock | 44 ++++++++++++++++++- 14 files changed, 80 insertions(+), 11 deletions(-) rename app/marionette/src/client/{index.js => index.ts} (100%) rename app/marionette/src/client/preview/{element_check.js => element_check.ts} (81%) rename app/marionette/src/client/preview/{globals.js => globals.ts} (100%) rename app/marionette/src/client/preview/{index.js => index.ts} (69%) rename app/marionette/src/client/preview/{render.js => render.ts} (75%) rename app/marionette/src/server/{build.js => build.ts} (100%) delete mode 100644 app/marionette/src/server/framework-preset-marionette.js create mode 100644 app/marionette/src/server/framework-preset-marionette.ts rename app/marionette/src/server/{index.js => index.ts} (100%) rename app/marionette/src/server/{options.js => options.ts} (100%) create mode 100644 app/marionette/src/typings.d.ts create mode 100644 app/marionette/tsconfig.json diff --git a/app/marionette/package.json b/app/marionette/package.json index f9c266d038bc..58d0dc5af649 100644 --- a/app/marionette/package.json +++ b/app/marionette/package.json @@ -45,6 +45,8 @@ "regenerator-runtime": "^0.13.7" }, "devDependencies": { + "@types/backbone.marionette": "^3.3.12", + "@types/common-tags": "^1.8.0", "backbone.marionette": "*" }, "peerDependencies": { diff --git a/app/marionette/src/client/index.js b/app/marionette/src/client/index.ts similarity index 100% rename from app/marionette/src/client/index.js rename to app/marionette/src/client/index.ts diff --git a/app/marionette/src/client/preview/element_check.js b/app/marionette/src/client/preview/element_check.ts similarity index 81% rename from app/marionette/src/client/preview/element_check.js rename to app/marionette/src/client/preview/element_check.ts index 61d71cc68d4b..41444e3d889b 100644 --- a/app/marionette/src/client/preview/element_check.js +++ b/app/marionette/src/client/preview/element_check.ts @@ -8,10 +8,10 @@ const allMarionetteViewConstructors = [ ]; const viewConstructorsSupportedByMarionette = allMarionetteViewConstructors .filter((constructorName) => constructorName in Marionette) - .map((constructorName) => Marionette[constructorName]); + .map((constructorName) => (Marionette as any)[constructorName]); // accepts an element and return true if renderable else return false -const isMarionetteRenderable = (element) => { +const isMarionetteRenderable = (element: any) => { return viewConstructorsSupportedByMarionette.find( (Constructor) => element instanceof Constructor ); diff --git a/app/marionette/src/client/preview/globals.js b/app/marionette/src/client/preview/globals.ts similarity index 100% rename from app/marionette/src/client/preview/globals.js rename to app/marionette/src/client/preview/globals.ts diff --git a/app/marionette/src/client/preview/index.js b/app/marionette/src/client/preview/index.ts similarity index 69% rename from app/marionette/src/client/preview/index.js rename to app/marionette/src/client/preview/index.ts index 0128a027102c..d55d8376544c 100644 --- a/app/marionette/src/client/preview/index.js +++ b/app/marionette/src/client/preview/index.ts @@ -15,8 +15,9 @@ export const { } = clientApi; const framework = 'marionette'; -export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework }); -export const load = (...args) => coreLoad(...args, framework); +export const storiesOf = (...args: any) => + clientApi.storiesOf(...args).addParameters({ framework }); +export const load = (...args: any) => coreLoad(...args, framework); export const { configure } = configApi; export { forceReRender }; diff --git a/app/marionette/src/client/preview/render.js b/app/marionette/src/client/preview/render.ts similarity index 75% rename from app/marionette/src/client/preview/render.js rename to app/marionette/src/client/preview/render.ts index c236aa3b4cfc..11f3d417b503 100644 --- a/app/marionette/src/client/preview/render.js +++ b/app/marionette/src/client/preview/render.ts @@ -1,16 +1,28 @@ import { document } from 'global'; import { stripIndents } from 'common-tags'; -import Marionette from 'backbone.marionette'; +import Marionette, { View } from 'backbone.marionette'; import isMarionetteRenderable from './element_check'; const rootEl = document.getElementById('root'); const rootRegion = new Marionette.Region({ el: rootEl }); -function render(view) { +function render(view: View) { rootRegion.show(view); } -export default function renderMain({ storyFn, kind, name, showMain, showError }) { +export default function renderMain({ + storyFn, + kind, + name, + showMain, + showError, +}: { + storyFn: any; + kind: string; + name: string; + showMain: () => any; + showError: (options: { title: string; description: string }) => void; +}) { const element = storyFn(); if (!element) { diff --git a/app/marionette/src/server/build.js b/app/marionette/src/server/build.ts similarity index 100% rename from app/marionette/src/server/build.js rename to app/marionette/src/server/build.ts diff --git a/app/marionette/src/server/framework-preset-marionette.js b/app/marionette/src/server/framework-preset-marionette.js deleted file mode 100644 index df8a5ec614e1..000000000000 --- a/app/marionette/src/server/framework-preset-marionette.js +++ /dev/null @@ -1,3 +0,0 @@ -export function webpack(config) { - return config; -} diff --git a/app/marionette/src/server/framework-preset-marionette.ts b/app/marionette/src/server/framework-preset-marionette.ts new file mode 100644 index 000000000000..99c260139df1 --- /dev/null +++ b/app/marionette/src/server/framework-preset-marionette.ts @@ -0,0 +1,6 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { Configuration } from 'webpack'; + +export function webpack(config: Configuration) { + return config; +} diff --git a/app/marionette/src/server/index.js b/app/marionette/src/server/index.ts similarity index 100% rename from app/marionette/src/server/index.js rename to app/marionette/src/server/index.ts diff --git a/app/marionette/src/server/options.js b/app/marionette/src/server/options.ts similarity index 100% rename from app/marionette/src/server/options.js rename to app/marionette/src/server/options.ts diff --git a/app/marionette/src/typings.d.ts b/app/marionette/src/typings.d.ts new file mode 100644 index 000000000000..6288cba4b09a --- /dev/null +++ b/app/marionette/src/typings.d.ts @@ -0,0 +1,2 @@ +declare module '@storybook/core/*'; +declare module 'global'; diff --git a/app/marionette/tsconfig.json b/app/marionette/tsconfig.json new file mode 100644 index 000000000000..0f41123e444a --- /dev/null +++ b/app/marionette/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "src", + "types": ["webpack-env"] + } +} diff --git a/yarn.lock b/yarn.lock index a4e1d899c141..6cd8b11a8550 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4438,6 +4438,31 @@ dependencies: "@babel/types" "^7.3.0" +"@types/backbone.marionette@^3.3.12": + version "3.3.12" + resolved "https://registry.yarnpkg.com/@types/backbone.marionette/-/backbone.marionette-3.3.12.tgz#f9fca0039c8d4ecc2e252c5074c0c148fd549191" + integrity sha512-+jJtbRQKRPoBFwsltIPNqyKXPwSQN0rDl2ZYry+ma6H4l5W+XccEOcBp9S64DqagLdJ29OTEyU/+b9o0lR0BrA== + dependencies: + "@types/backbone" "*" + "@types/backbone.radio" "*" + "@types/jquery" "*" + "@types/underscore" "*" + +"@types/backbone.radio@*": + version "0.8.37" + resolved "https://registry.yarnpkg.com/@types/backbone.radio/-/backbone.radio-0.8.37.tgz#c049db3f29dc5bb55a4b3cffcfd3ec7d9d985ec5" + integrity sha512-N0+9bvV/NfXBO772lsPPFtxrHNYOqm8ctwfF8eJAqbjQ/wKqzZfh/uMLCv6CBkenSWro3W1GIpRntMFSQvHQRA== + dependencies: + "@types/backbone" "*" + +"@types/backbone@*": + version "1.4.5" + resolved "https://registry.yarnpkg.com/@types/backbone/-/backbone-1.4.5.tgz#057d89987fb672a20b896b1df5cc802f7b87c624" + integrity sha512-pSqM0eryp6V3G0srBtndUd9IJmiG2BAwYLQGPDcEPMjbfbgitlrN40+Lc1rrMjNMbV5QWywe6WPmNjdqyNTyIw== + dependencies: + "@types/jquery" "*" + "@types/underscore" "*" + "@types/body-parser@*": version "1.19.0" resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.0.tgz#0685b3c47eb3006ffed117cdd55164b61f80538f" @@ -4489,6 +4514,11 @@ dependencies: "@types/node" "*" +"@types/common-tags@^1.8.0": + version "1.8.0" + resolved "https://registry.yarnpkg.com/@types/common-tags/-/common-tags-1.8.0.tgz#79d55e748d730b997be5b7fce4b74488d8b26a6b" + integrity sha512-htRqZr5qn8EzMelhX/Xmx142z218lLyGaeZ3YR8jlze4TATRU9huKKvuBmAJEW4LCC4pnY1N6JAm6p85fMHjhg== + "@types/connect-history-api-fallback@*": version "1.3.3" resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.3.tgz#4772b79b8b53185f0f4c9deab09236baf76ee3b4" @@ -4790,6 +4820,13 @@ jest-diff "^25.2.1" pretty-format "^25.2.1" +"@types/jquery@*": + version "3.5.5" + resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.5.5.tgz#2c63f47c9c8d96693d272f5453602afd8338c903" + integrity sha512-6RXU9Xzpc6vxNrS6FPPapN1SxSHgQ336WC6Jj/N8q30OiaBZ00l1GBgeP7usjVZPivSkGUfL1z/WW6TX989M+w== + dependencies: + "@types/sizzle" "*" + "@types/js-yaml@^3.12.4": version "3.12.5" resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-3.12.5.tgz#136d5e6a57a931e1cce6f9d8126aa98a9c92a6bb" @@ -5153,7 +5190,7 @@ resolved "https://registry.yarnpkg.com/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-6.0.1.tgz#681df970358c82836b42f989188d133e218c458e" integrity sha512-yYezQwGWty8ziyYLdZjwxyMb0CZR49h8JALHGrxjQHWlqGgc8kLdHEgWrgL0uZ29DMvEVBDnHU2Wg36zKSIUtA== -"@types/sizzle@2.3.2": +"@types/sizzle@*", "@types/sizzle@2.3.2": version "2.3.2" resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.2.tgz#a811b8c18e2babab7d542b3365887ae2e4d9de47" integrity sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg== @@ -5217,6 +5254,11 @@ dependencies: source-map "^0.6.1" +"@types/underscore@*": + version "1.10.24" + resolved "https://registry.yarnpkg.com/@types/underscore/-/underscore-1.10.24.tgz#dede004deed3b3f99c4db0bdb9ee21cae25befdd" + integrity sha512-T3NQD8hXNW2sRsSbLNjF/aBo18MyJlbw0lSpQHB/eZZtScPdexN4HSa8cByYwTw9Wy7KuOFr81mlDQcQQaZ79w== + "@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2", "@types/unist@^2.0.3": version "2.0.3" resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"