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: ['

some tests

'] }, context)).toBe(true); expect(rootElement.innerHTML).toEqual('

some tests

'); }); it('can work with raw code', () => { + // @ts-ignore expect(render("riot.tag2('root', '
raw code
', '', '', () => {})", 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', '

Hello { opts.suffix }

', '', '', () => {}); + // @ts-ignore expect(render({ tagName: 'hello', opts: { suffix: 'World' } }, context)).toBe(true); expect(rootElement.innerHTML).toEqual('

Hello World

'); @@ -76,6 +82,7 @@ describe('render a riot element', () => { ], template: '
Content
', }, + // @ts-ignore context ) ).toBe(true); @@ -97,6 +104,7 @@ describe('render a riot element', () => { template: '', }, + // @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('`, 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==