From c30d0641bc1a28e7dbc063604ae4c74e959ff2b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Maisse?= <gmaisse@solocal.com>
Date: Mon, 14 Dec 2020 21:04:04 +0100
Subject: [PATCH] refactor(riot): migrate to TS

---
 app/riot/package.json                                    | 9 +++++----
 app/riot/src/client/{index.js => index.ts}               | 0
 ...render-riot.test.js.snap => render-riot.test.ts.snap} | 0
 ...compileStageFunctions.js => compileStageFunctions.ts} | 8 ++++----
 app/riot/src/client/preview/{globals.js => globals.ts}   | 0
 app/riot/src/client/preview/{index.js => index.ts}       | 6 ++++--
 .../preview/{render-riot.test.js => render-riot.test.ts} | 9 +++++++++
 app/riot/src/client/preview/{render.js => render.ts}     | 6 ++++++
 .../{compiledButUnmounted.js => compiledButUnmounted.ts} | 2 +-
 .../src/client/preview/rendering/{index.js => index.ts}  | 2 +-
 app/riot/src/client/preview/rendering/{raw.js => raw.ts} | 3 ++-
 .../preview/rendering/{stringified.js => stringified.ts} | 9 +++++++--
 app/riot/src/server/{build.js => build.ts}               | 0
 ...framework-preset-riot.js => framework-preset-riot.ts} | 4 +++-
 app/riot/src/server/{index.js => index.ts}               | 0
 app/riot/src/server/{options.js => options.ts}           | 2 +-
 app/riot/src/typings.d.ts                                | 3 +++
 app/riot/tsconfig.json                                   | 7 +++++++
 yarn.lock                                                | 9 +++++++--
 19 files changed, 60 insertions(+), 19 deletions(-)
 rename app/riot/src/client/{index.js => index.ts} (100%)
 rename app/riot/src/client/preview/__snapshots__/{render-riot.test.js.snap => render-riot.test.ts.snap} (100%)
 rename app/riot/src/client/preview/{compileStageFunctions.js => compileStageFunctions.ts} (68%)
 rename app/riot/src/client/preview/{globals.js => globals.ts} (100%)
 rename app/riot/src/client/preview/{index.js => index.ts} (77%)
 rename app/riot/src/client/preview/{render-riot.test.js => render-riot.test.ts} (95%)
 rename app/riot/src/client/preview/{render.js => render.ts} (84%)
 rename app/riot/src/client/preview/rendering/{compiledButUnmounted.js => compiledButUnmounted.ts} (56%)
 rename app/riot/src/client/preview/rendering/{index.js => index.ts} (93%)
 rename app/riot/src/client/preview/rendering/{raw.js => raw.ts} (85%)
 rename app/riot/src/client/preview/rendering/{stringified.js => stringified.ts} (92%)
 rename app/riot/src/server/{build.js => build.ts} (100%)
 rename app/riot/src/server/{framework-preset-riot.js => framework-preset-riot.ts} (83%)
 rename app/riot/src/server/{index.js => index.ts} (100%)
 rename app/riot/src/server/{options.js => options.ts} (71%)
 create mode 100644 app/riot/src/typings.d.ts
 create mode 100644 app/riot/tsconfig.json

diff --git a/app/riot/package.json b/app/riot/package.json
index a8536cf34a94..865a5901db9f 100644
--- a/app/riot/package.json
+++ b/app/riot/package.json
@@ -51,10 +51,11 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/plugin-transform-modules-commonjs": "^7.12.1",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/preset-flow": "^7.12.1",
-    "@babel/preset-react": "^7.12.1"
+    "@types/riot": "^3.6.2",
+    "riot": "^3.13.2",
+    "riot-compiler": "^3.6.0",
+    "riot-hot-reload": "^1.0.0",
+    "riot-tag-loader": "^2.1.0"
   },
   "peerDependencies": {
     "@babel/core": "*",
diff --git a/app/riot/src/client/index.js b/app/riot/src/client/index.ts
similarity index 100%
rename from app/riot/src/client/index.js
rename to app/riot/src/client/index.ts
diff --git a/app/riot/src/client/preview/__snapshots__/render-riot.test.js.snap b/app/riot/src/client/preview/__snapshots__/render-riot.test.ts.snap
similarity index 100%
rename from app/riot/src/client/preview/__snapshots__/render-riot.test.js.snap
rename to app/riot/src/client/preview/__snapshots__/render-riot.test.ts.snap
diff --git a/app/riot/src/client/preview/compileStageFunctions.js b/app/riot/src/client/preview/compileStageFunctions.ts
similarity index 68%
rename from app/riot/src/client/preview/compileStageFunctions.js
rename to app/riot/src/client/preview/compileStageFunctions.ts
index 8c80595f1853..924ceb9354e5 100644
--- a/app/riot/src/client/preview/compileStageFunctions.js
+++ b/app/riot/src/client/preview/compileStageFunctions.ts
@@ -2,22 +2,22 @@ import compiler from 'riot-compiler';
 
 export const alreadyCompiledMarker = "var riot = require('riot')";
 
-export function asCompiledCode(text) {
+export function asCompiledCode(text: string) {
   return compiler
     .compile(text, {})
     .replace('var riot = require("riot")', '')
     .replace('riot.tag2(', 'tag2(');
 }
 
-export function compileNow(tag2, text) {
+export function compileNow(tag2: unknown, text: string) {
   // eslint-disable-next-line no-eval
   return tag2 && eval(asCompiledCode(text));
 }
 
-export function getRidOfRiotNoise(compiled) {
+export function getRidOfRiotNoise(compiled: string) {
   return compiled.replace(/riot\.tag2/g, 'tag2').replace(alreadyCompiledMarker, '');
 }
 
-export function setConstructor(compiledSourceCode, constructor) {
+export function setConstructor(compiledSourceCode: string, constructor: any) {
   return compiledSourceCode.replace(/function\(opts\)\s*{\s*}(?=\);$)/, constructor.toString());
 }
diff --git a/app/riot/src/client/preview/globals.js b/app/riot/src/client/preview/globals.ts
similarity index 100%
rename from app/riot/src/client/preview/globals.js
rename to app/riot/src/client/preview/globals.ts
diff --git a/app/riot/src/client/preview/index.js b/app/riot/src/client/preview/index.ts
similarity index 77%
rename from app/riot/src/client/preview/index.js
rename to app/riot/src/client/preview/index.ts
index 4ecddb28577b..5b9fe0d0788c 100644
--- a/app/riot/src/client/preview/index.js
+++ b/app/riot/src/client/preview/index.ts
@@ -1,6 +1,7 @@
 import { start } from '@storybook/core/client';
 
 import './globals';
+// @ts-ignore
 import riot, { tag2, mount as vendorMount } from 'riot';
 import render from './render';
 import { compileNow as unboundCompileNow, asCompiledCode } from './compileStageFunctions';
@@ -17,8 +18,9 @@ export const {
 } = clientApi;
 
 const framework = 'riot';
-export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
-export const configure = (...args) => coreConfigure(framework, ...args);
+export const storiesOf = (...args: any) =>
+  clientApi.storiesOf(...args).addParameters({ framework });
+export const configure = (...args: any) => coreConfigure(framework, ...args);
 
 const mount = vendorMount.bind(riot, '#root');
 const compileNow = unboundCompileNow.bind(null, tag2);
diff --git a/app/riot/src/client/preview/render-riot.test.js b/app/riot/src/client/preview/render-riot.test.ts
similarity index 95%
rename from app/riot/src/client/preview/render-riot.test.js
rename to app/riot/src/client/preview/render-riot.test.ts
index 7478535be143..9c6acabf5ca9 100644
--- a/app/riot/src/client/preview/render-riot.test.js
+++ b/app/riot/src/client/preview/render-riot.test.ts
@@ -1,4 +1,5 @@
 import { document } from 'global';
+// @ts-ignore
 import { unregister, tag2, mount } from 'riot';
 import compiler from 'riot-compiler';
 import { render } from './rendering';
@@ -23,18 +24,21 @@ beforeEach(() => {
 
 describe('render a riot element', () => {
   it('should not work with nothing', () => {
+    // @ts-ignore
     expect(render(null, context)).toBe(false);
 
     expect(rootElement.innerHTML).toEqual('');
   });
 
   it('can work with some text', () => {
+    // @ts-ignore
     expect(render({ tags: ['<div><p>some tests</p></div>'] }, context)).toBe(true);
 
     expect(rootElement.innerHTML).toEqual('<div><p>some tests</p></div>');
   });
 
   it('can work with raw code', () => {
+    // @ts-ignore
     expect(render("riot.tag2('root', '<div>raw code</div>', '', '', () => {})", context)).toBe(
       true
     );
@@ -43,6 +47,7 @@ describe('render a riot element', () => {
   });
 
   it('can work with compiled code', () => {
+    // @ts-ignore
     expect(render([{}], context)).toBe(true);
     // does only work in true mode, and not in jest mode
   });
@@ -58,6 +63,7 @@ describe('render a riot element', () => {
   it('works with a json consisting in a tagName and opts', () => {
     tag2('hello', '<p>Hello { opts.suffix }</p>', '', '', () => {});
 
+    // @ts-ignore
     expect(render({ tagName: 'hello', opts: { suffix: 'World' } }, context)).toBe(true);
 
     expect(rootElement.innerHTML).toEqual('<p>Hello World</p>');
@@ -76,6 +82,7 @@ describe('render a riot element', () => {
           ],
           template: '<Matriochka><div><Tag1>Content</Tag1></div></Matriochka>',
         },
+        // @ts-ignore
         context
       )
     ).toBe(true);
@@ -97,6 +104,7 @@ describe('render a riot element', () => {
           template:
             '<SimpleTest test={ "with a parameter" } value={"value is mapped to riotValue"}></SimpleTest>',
         },
+        // @ts-ignore
         context
       )
     ).toBe(true);
@@ -121,6 +129,7 @@ describe('render a riot element', () => {
             this.hacked = true;
           },
         },
+        // @ts-ignore
         context
       )
     ).toBe(true);
diff --git a/app/riot/src/client/preview/render.js b/app/riot/src/client/preview/render.ts
similarity index 84%
rename from app/riot/src/client/preview/render.js
rename to app/riot/src/client/preview/render.ts
index f17ee2596383..c5338a4f2358 100644
--- a/app/riot/src/client/preview/render.js
+++ b/app/riot/src/client/preview/render.ts
@@ -9,6 +9,12 @@ export default function renderMain({
   name,
   showMain = () => {},
   showError = () => {},
+}: {
+  storyFn: Function;
+  kind: string;
+  name: string;
+  showMain: () => any;
+  showError: (input: { title: string; description: string }) => void;
 }) {
   showMain();
   unregister('#root');
diff --git a/app/riot/src/client/preview/rendering/compiledButUnmounted.js b/app/riot/src/client/preview/rendering/compiledButUnmounted.ts
similarity index 56%
rename from app/riot/src/client/preview/rendering/compiledButUnmounted.js
rename to app/riot/src/client/preview/rendering/compiledButUnmounted.ts
index 5a8d92e47be5..47d8f3ee3bc4 100644
--- a/app/riot/src/client/preview/rendering/compiledButUnmounted.js
+++ b/app/riot/src/client/preview/rendering/compiledButUnmounted.ts
@@ -1,5 +1,5 @@
 import { mount } from 'riot';
 
-export default function renderCompiledButUnmounted(component) {
+export default function renderCompiledButUnmounted(component: any) {
   mount('root', component.tagName, component.opts || {});
 }
diff --git a/app/riot/src/client/preview/rendering/index.js b/app/riot/src/client/preview/rendering/index.ts
similarity index 93%
rename from app/riot/src/client/preview/rendering/index.js
rename to app/riot/src/client/preview/rendering/index.ts
index 752053ba02e5..67bf624371ae 100644
--- a/app/riot/src/client/preview/rendering/index.js
+++ b/app/riot/src/client/preview/rendering/index.ts
@@ -2,7 +2,7 @@ import renderCompiledButUnmounted from './compiledButUnmounted';
 import renderStringified from './stringified';
 import renderRaw from './raw';
 
-export function render(component) {
+export function render(component: any) {
   if (typeof component === 'string') {
     renderRaw(component);
     return true;
diff --git a/app/riot/src/client/preview/rendering/raw.js b/app/riot/src/client/preview/rendering/raw.ts
similarity index 85%
rename from app/riot/src/client/preview/rendering/raw.js
rename to app/riot/src/client/preview/rendering/raw.ts
index f706cd8876ba..b66c0674b843 100644
--- a/app/riot/src/client/preview/rendering/raw.js
+++ b/app/riot/src/client/preview/rendering/raw.ts
@@ -1,8 +1,9 @@
+// @ts-ignore
 import { mount, tag2 as tag } from 'riot';
 import compiler from 'riot-compiler';
 import { alreadyCompiledMarker, getRidOfRiotNoise } from '../compileStageFunctions';
 
-export default function renderRaw(sourceCode) {
+export default function renderRaw(sourceCode: string) {
   const tag2 = tag;
   // eslint-disable-next-line no-eval
   eval(
diff --git a/app/riot/src/client/preview/rendering/stringified.js b/app/riot/src/client/preview/rendering/stringified.ts
similarity index 92%
rename from app/riot/src/client/preview/rendering/stringified.js
rename to app/riot/src/client/preview/rendering/stringified.ts
index 4a7a732b34a9..cfb6730d815c 100644
--- a/app/riot/src/client/preview/rendering/stringified.js
+++ b/app/riot/src/client/preview/rendering/stringified.ts
@@ -1,10 +1,11 @@
+// @ts-ignore
 import { mount, unregister, tag2 as tag } from 'riot';
 import * as riot from 'riot';
 import compiler from 'riot-compiler';
 import { document } from 'global';
 import { alreadyCompiledMarker, getRidOfRiotNoise, setConstructor } from '../compileStageFunctions';
 
-function guessRootName(stringified) {
+function guessRootName(stringified: string) {
   const whiteSpaceLocation = stringified.indexOf(' ', stringified.indexOf('<') + 1);
   const firstWhitespace = whiteSpaceLocation === -1 ? stringified.length : whiteSpaceLocation;
   const supposedName = stringified.trim().match(/^<[^ >]+\/>$/)
@@ -17,7 +18,7 @@ function guessRootName(stringified) {
   return matchingBuiltInTag === 'HTMLUnknownElement' ? supposedName : 'root';
 }
 
-function compileText(code, rootName) {
+function compileText(code: string, rootName: string) {
   const sourceCodeEndOfHtml =
     (Math.min(code.indexOf('<style') + 1, code.indexOf('<script') + 1) || code.length + 1) - 1;
   const sourceCodeReformatted =
@@ -32,6 +33,10 @@ export default function renderStringified({
   tags,
   template = `<${(tags[0] || []).boundAs || guessRootName(tags[0] || '')}/>`,
   tagConstructor,
+}: {
+  tags: any[];
+  template: string;
+  tagConstructor: any;
 }) {
   const tag2 = tag;
   tags.forEach((input) => {
diff --git a/app/riot/src/server/build.js b/app/riot/src/server/build.ts
similarity index 100%
rename from app/riot/src/server/build.js
rename to app/riot/src/server/build.ts
diff --git a/app/riot/src/server/framework-preset-riot.js b/app/riot/src/server/framework-preset-riot.ts
similarity index 83%
rename from app/riot/src/server/framework-preset-riot.js
rename to app/riot/src/server/framework-preset-riot.ts
index 820e02e015d2..9c12474030e8 100644
--- a/app/riot/src/server/framework-preset-riot.js
+++ b/app/riot/src/server/framework-preset-riot.ts
@@ -1,4 +1,6 @@
-export function webpack(config) {
+import { Configuration } from 'webpack';
+
+export function webpack(config: Configuration) {
   return {
     ...config,
     module: {
diff --git a/app/riot/src/server/index.js b/app/riot/src/server/index.ts
similarity index 100%
rename from app/riot/src/server/index.js
rename to app/riot/src/server/index.ts
diff --git a/app/riot/src/server/options.js b/app/riot/src/server/options.ts
similarity index 71%
rename from app/riot/src/server/options.js
rename to app/riot/src/server/options.ts
index fbaea49b8571..937c1ee32388 100644
--- a/app/riot/src/server/options.js
+++ b/app/riot/src/server/options.ts
@@ -1,4 +1,4 @@
-import packageJson from '../../package.json';
+const packageJson = require('../../package.json');
 
 export default {
   packageJson,
diff --git a/app/riot/src/typings.d.ts b/app/riot/src/typings.d.ts
new file mode 100644
index 000000000000..63cc5d029391
--- /dev/null
+++ b/app/riot/src/typings.d.ts
@@ -0,0 +1,3 @@
+declare module '@storybook/core/*';
+declare module 'global';
+declare module 'riot-compiler';
diff --git a/app/riot/tsconfig.json b/app/riot/tsconfig.json
new file mode 100644
index 000000000000..f6ba3c7e250f
--- /dev/null
+++ b/app/riot/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["jest", "webpack-env"]
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 4c762ba79533..b7bb3b28c0c1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5116,6 +5116,11 @@
     "@types/glob" "*"
     "@types/node" "*"
 
+"@types/riot@^3.6.2":
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/@types/riot/-/riot-3.6.2.tgz#d3e0f384ffb1d718f5fd89b8a14e7d60c7f6940c"
+  integrity sha512-e/q9dwOgGXeouq1ipQMxwuukYf8lMZbhzbuvFqX4XhdQHyf6Dn4pOxwZGkXSCJ+HZ8c79fgAzpACO92MqbTi2g==
+
 "@types/selenium-webdriver@^3.0.0":
   version "3.0.17"
   resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-3.0.17.tgz#50bea0c3c2acc31c959c5b1e747798b3b3d06d4b"
@@ -28774,7 +28779,7 @@ riot-cli@^4.0.2:
     riot-compiler "^3.5.1"
     rollup "^0.57.1"
 
-riot-compiler@^3.5.1, riot-compiler@^3.5.2:
+riot-compiler@^3.5.1, riot-compiler@^3.5.2, riot-compiler@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/riot-compiler/-/riot-compiler-3.6.0.tgz#f65428cf25b940098e35ea9c8357ca91cae10280"
   integrity sha512-P2MVj0T9ox0EFPTSSHJIAaBe6/fCnKln76BtPK6ezAlBW2+qKCDzzvkj3gwFvGEG1dYUHa2jQ/O6+FZNNe8CYw==
@@ -28815,7 +28820,7 @@ riot-tmpl@^3.0.8:
   dependencies:
     eslint-config-riot "^1.0.0"
 
-riot@^3.13.0, riot@^3.3.1:
+riot@^3.13.0, riot@^3.13.2, riot@^3.3.1:
   version "3.13.2"
   resolved "https://registry.yarnpkg.com/riot/-/riot-3.13.2.tgz#3f5fb86b0d2b864bdcc959b7f86e2f4c2f696726"
   integrity sha512-L4WFJEhbTA0deDoZ1XxoVw7Tf96+xYc06aQ+4QM+IkYClD6mZ7E/9zN3Rd48uYMBvHQfHtbPvR0KEiu3pJyI2A==