refactor(riot): migrate to TS

app/riot/package.json

@@ -53,10 +53,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": "*",

app/riot/src/client/preview/compileStageFunctions.js → 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());
 }

app/riot/src/client/preview/index.js → app/riot/src/client/preview/index.ts

@@ -17,8 +17,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);

app/riot/src/client/preview/render-riot.test.js → app/riot/src/client/preview/render-riot.test.ts

@@ -23,27 +23,25 @@ beforeEach(() => {
 
 describe('render a riot element', () => {
   it('should not work with nothing', () => {
-    expect(render(null, context)).toBe(false);
+    expect(render(null)).toBe(false);
 
     expect(rootElement.innerHTML).toEqual('');
   });
 
   it('can work with some text', () => {
-    expect(render({ tags: ['<div><p>some tests</p></div>'] }, context)).toBe(true);
+    expect(render({ tags: ['<div><p>some tests</p></div>'] })).toBe(true);
 
     expect(rootElement.innerHTML).toEqual('<div><p>some tests</p></div>');
   });
 
   it('can work with raw code', () => {
-    expect(render("riot.tag2('root', '<div>raw code</div>', '', '', () => {})", context)).toBe(
-      true
-    );
+    expect(render("riot.tag2('root', '<div>raw code</div>', '', '', () => {})")).toBe(true);
 
     expect(rootElement.innerHTML).toEqual('<div>raw code</div>');
   });
 
   it('can work with compiled code', () => {
-    expect(render([{}], context)).toBe(true);
+    expect(render([{}])).toBe(true);
     // does only work in true mode, and not in jest mode
   });
 
@@ -58,71 +56,62 @@ describe('render a riot element', () => {
   it('works with a json consisting in a tagName and opts', () => {
     tag2('hello', '<p>Hello { opts.suffix }</p>', '', '', () => {});
 
-    expect(render({ tagName: 'hello', opts: { suffix: 'World' } }, context)).toBe(true);
+    expect(render({ tagName: 'hello', opts: { suffix: 'World' } })).toBe(true);
 
     expect(rootElement.innerHTML).toEqual('<p>Hello World</p>');
   });
 
   it('can nest several tags', () => {
     expect(
-      render(
-        {
-          tags: [
-            '<Tag1><div>Inside tag1:<ul><li><Tag2><yield/></Tag2></li></ul></div></Tag1>',
-            '<Tag2><div>Inside tag2:<ul><li><Tag3><yield/></Tag3></li></ul></div></Tag2>',
-            '<Tag3><div>Inside tag3:<ul><li><Tag4><yield/></Tag4></li></ul></div></Tag3>',
-            '<Tag4><div>Inside tag4:<ul><li><Tag5><yield/></Tag5></li></ul></div></Tag4>',
-            '<Tag5><div>Inside tag5:<ul><li><yield/></li></ul></div></Tag5>',
-          ],
-          template: '<Matriochka><div><Tag1>Content</Tag1></div></Matriochka>',
-        },
-        context
-      )
+      render({
+        tags: [
+          '<Tag1><div>Inside tag1:<ul><li><Tag2><yield/></Tag2></li></ul></div></Tag1>',
+          '<Tag2><div>Inside tag2:<ul><li><Tag3><yield/></Tag3></li></ul></div></Tag2>',
+          '<Tag3><div>Inside tag3:<ul><li><Tag4><yield/></Tag4></li></ul></div></Tag3>',
+          '<Tag4><div>Inside tag4:<ul><li><Tag5><yield/></Tag5></li></ul></div></Tag4>',
+          '<Tag5><div>Inside tag5:<ul><li><yield/></li></ul></div></Tag5>',
+        ],
+        template: '<Matriochka><div><Tag1>Content</Tag1></div></Matriochka>',
+      })
     ).toBe(true);
 
     expect(rootElement.innerHTML).toMatchSnapshot();
   });
 
   it('can template some vars', () => {
     expect(
-      render(
-        {
-          tags: [
-            {
-              content:
-                "<SimpleTest><div>simple test ({opts.test || 'without parameter'}). Oh, by the way ({opts.riotValue || '... well, nothing'})</div></SimpleTest>",
-              boundAs: 'mustBeUniquePlease',
-            },
-          ],
-          template:
-            '<SimpleTest test={ "with a parameter" } value={"value is mapped to riotValue"}></SimpleTest>',
-        },
-        context
-      )
+      render({
+        tags: [
+          {
+            content:
+              "<SimpleTest><div>simple test ({opts.test || 'without parameter'}). Oh, by the way ({opts.riotValue || '... well, nothing'})</div></SimpleTest>",
+            boundAs: 'mustBeUniquePlease',
+          },
+        ],
+        template:
+          '<SimpleTest test={ "with a parameter" } value={"value is mapped to riotValue"}></SimpleTest>',
+      })
     ).toBe(true);
 
     expect(rootElement.innerHTML).toMatchSnapshot();
   });
 
   it('can accept a constructor', () => {
     expect(
-      render(
-        {
-          tags: [
-            {
-              content:
-                "<SimpleTest><div>HACKED : {opts.hacked} ; simple test ({opts.test || 'without parameter'}). Oh, by the way ({opts.riotValue || '... well, nothing'})</div></SimpleTest>",
-              boundAs: 'mustBeUniquePlease',
-            },
-          ],
-          template:
-            '<SimpleTest hacked={hacked} test={ "with a parameter" } value={"value is mapped to riotValue"}></SimpleTest>',
-          tagConstructor: function tagConstructor() {
-            this.hacked = true;
+      render({
+        tags: [
+          {
+            content:
+              "<SimpleTest><div>HACKED : {opts.hacked} ; simple test ({opts.test || 'without parameter'}). Oh, by the way ({opts.riotValue || '... well, nothing'})</div></SimpleTest>",
+            boundAs: 'mustBeUniquePlease',
           },
+        ],
+        template:
+          '<SimpleTest hacked={hacked} test={ "with a parameter" } value={"value is mapped to riotValue"}></SimpleTest>',
+        tagConstructor: function tagConstructor() {
+          this.hacked = true;
         },
-        context
-      )
+      })
     ).toBe(true);
 
     expect(rootElement.innerHTML).toMatchSnapshot();

app/riot/src/client/preview/render.js → 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');

app/riot/src/client/preview/rendering/compiledButUnmounted.js → 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 || {});
 }

app/riot/src/client/preview/rendering/index.js → 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;

app/riot/src/client/preview/rendering/raw.js → app/riot/src/client/preview/rendering/raw.ts

@@ -2,7 +2,7 @@ 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(

app/riot/src/client/preview/rendering/stringified.js → app/riot/src/client/preview/rendering/stringified.ts

@@ -4,7 +4,7 @@ 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 +17,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 +32,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) => {

app/riot/src/server/framework-preset-riot.js → 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: {

app/riot/src/typings.d.ts

@@ -0,0 +1,8 @@
+declare module '@storybook/core/*';
+declare module 'global';
+declare module 'riot-compiler';
+declare module 'riot' {
+  const tag2: Function;
+  const mount: Function;
+  const unregister: Function;
+}

app/riot/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["jest", "webpack-env"]
+  }
+}

lib/cli/src/versions.json

@@ -1,55 +1,55 @@
 {
-  "@storybook/addon-a11y": "6.2.0-alpha.9",
-  "@storybook/addon-actions": "6.2.0-alpha.9",
-  "@storybook/addon-backgrounds": "6.2.0-alpha.9",
-  "@storybook/addon-controls": "6.2.0-alpha.9",
-  "@storybook/addon-cssresources": "6.2.0-alpha.9",
-  "@storybook/addon-design-assets": "6.2.0-alpha.9",
-  "@storybook/addon-docs": "6.2.0-alpha.9",
-  "@storybook/addon-essentials": "6.2.0-alpha.9",
-  "@storybook/addon-events": "6.2.0-alpha.9",
-  "@storybook/addon-google-analytics": "6.2.0-alpha.9",
-  "@storybook/addon-graphql": "6.2.0-alpha.9",
-  "@storybook/addon-jest": "6.2.0-alpha.9",
-  "@storybook/addon-knobs": "6.2.0-alpha.9",
-  "@storybook/addon-links": "6.2.0-alpha.9",
-  "@storybook/addon-queryparams": "6.2.0-alpha.9",
-  "@storybook/addon-storyshots": "6.2.0-alpha.9",
-  "@storybook/addon-storyshots-puppeteer": "6.2.0-alpha.9",
-  "@storybook/addon-storysource": "6.2.0-alpha.9",
-  "@storybook/addon-toolbars": "6.2.0-alpha.9",
-  "@storybook/addon-viewport": "6.2.0-alpha.9",
-  "@storybook/addons": "6.2.0-alpha.9",
-  "@storybook/angular": "6.2.0-alpha.9",
-  "@storybook/api": "6.2.0-alpha.9",
-  "@storybook/aurelia": "6.2.0-alpha.9",
-  "@storybook/channel-postmessage": "6.2.0-alpha.9",
-  "@storybook/channel-websocket": "6.2.0-alpha.9",
-  "@storybook/channels": "6.2.0-alpha.9",
-  "@storybook/cli": "6.2.0-alpha.9",
-  "@storybook/client-api": "6.2.0-alpha.9",
-  "@storybook/client-logger": "6.2.0-alpha.9",
-  "@storybook/codemod": "6.2.0-alpha.9",
-  "@storybook/components": "6.2.0-alpha.9",
-  "@storybook/core": "6.2.0-alpha.9",
-  "@storybook/core-events": "6.2.0-alpha.9",
-  "@storybook/ember": "6.2.0-alpha.9",
-  "@storybook/html": "6.2.0-alpha.9",
-  "@storybook/marionette": "6.2.0-alpha.9",
-  "@storybook/marko": "6.2.0-alpha.9",
-  "@storybook/mithril": "6.2.0-alpha.9",
-  "@storybook/node-logger": "6.2.0-alpha.9",
-  "@storybook/postinstall": "6.2.0-alpha.9",
-  "@storybook/preact": "6.2.0-alpha.9",
-  "@storybook/rax": "6.2.0-alpha.9",
-  "@storybook/react": "6.2.0-alpha.9",
-  "@storybook/riot": "6.2.0-alpha.9",
-  "@storybook/router": "6.2.0-alpha.9",
-  "@storybook/server": "6.2.0-alpha.9",
-  "@storybook/source-loader": "6.2.0-alpha.9",
-  "@storybook/svelte": "6.2.0-alpha.9",
-  "@storybook/theming": "6.2.0-alpha.9",
-  "@storybook/ui": "6.2.0-alpha.9",
-  "@storybook/vue": "6.2.0-alpha.9",
-  "@storybook/web-components": "6.2.0-alpha.9"
+  "@storybook/addon-a11y": "6.2.0-alpha.10",
+  "@storybook/addon-actions": "6.2.0-alpha.10",
+  "@storybook/addon-backgrounds": "6.2.0-alpha.10",
+  "@storybook/addon-controls": "6.2.0-alpha.10",
+  "@storybook/addon-cssresources": "6.2.0-alpha.10",
+  "@storybook/addon-design-assets": "6.2.0-alpha.10",
+  "@storybook/addon-docs": "6.2.0-alpha.10",
+  "@storybook/addon-essentials": "6.2.0-alpha.10",
+  "@storybook/addon-events": "6.2.0-alpha.10",
+  "@storybook/addon-google-analytics": "6.2.0-alpha.10",
+  "@storybook/addon-graphql": "6.2.0-alpha.10",
+  "@storybook/addon-jest": "6.2.0-alpha.10",
+  "@storybook/addon-knobs": "6.2.0-alpha.10",
+  "@storybook/addon-links": "6.2.0-alpha.10",
+  "@storybook/addon-queryparams": "6.2.0-alpha.10",
+  "@storybook/addon-storyshots": "6.2.0-alpha.10",
+  "@storybook/addon-storyshots-puppeteer": "6.2.0-alpha.10",
+  "@storybook/addon-storysource": "6.2.0-alpha.10",
+  "@storybook/addon-toolbars": "6.2.0-alpha.10",
+  "@storybook/addon-viewport": "6.2.0-alpha.10",
+  "@storybook/addons": "6.2.0-alpha.10",
+  "@storybook/angular": "6.2.0-alpha.10",
+  "@storybook/api": "6.2.0-alpha.10",
+  "@storybook/aurelia": "6.2.0-alpha.10",
+  "@storybook/channel-postmessage": "6.2.0-alpha.10",
+  "@storybook/channel-websocket": "6.2.0-alpha.10",
+  "@storybook/channels": "6.2.0-alpha.10",
+  "@storybook/cli": "6.2.0-alpha.10",
+  "@storybook/client-api": "6.2.0-alpha.10",
+  "@storybook/client-logger": "6.2.0-alpha.10",
+  "@storybook/codemod": "6.2.0-alpha.10",
+  "@storybook/components": "6.2.0-alpha.10",
+  "@storybook/core": "6.2.0-alpha.10",
+  "@storybook/core-events": "6.2.0-alpha.10",
+  "@storybook/ember": "6.2.0-alpha.10",
+  "@storybook/html": "6.2.0-alpha.10",
+  "@storybook/marionette": "6.2.0-alpha.10",
+  "@storybook/marko": "6.2.0-alpha.10",
+  "@storybook/mithril": "6.2.0-alpha.10",
+  "@storybook/node-logger": "6.2.0-alpha.10",
+  "@storybook/postinstall": "6.2.0-alpha.10",
+  "@storybook/preact": "6.2.0-alpha.10",
+  "@storybook/rax": "6.2.0-alpha.10",
+  "@storybook/react": "6.2.0-alpha.10",
+  "@storybook/riot": "6.2.0-alpha.10",
+  "@storybook/router": "6.2.0-alpha.10",
+  "@storybook/server": "6.2.0-alpha.10",
+  "@storybook/source-loader": "6.2.0-alpha.10",
+  "@storybook/svelte": "6.2.0-alpha.10",
+  "@storybook/theming": "6.2.0-alpha.10",
+  "@storybook/ui": "6.2.0-alpha.10",
+  "@storybook/vue": "6.2.0-alpha.10",
+  "@storybook/web-components": "6.2.0-alpha.10"
 }