Join the 1-day Testing & QA Summit featuring 15+ Expert Speakers.Register for FREE! Join TestMu Conference

How to use tsTransform method in storybook-root

Best JavaScript code snippet using storybook-root

compiler.ts

Source:compiler.ts

...29  ts.ScriptTarget.Latest,30  false,31  ts.ScriptKind.TS32);33function tsTransform(node: any, context: any): any {34  if (!node) {35    return;36  }37  if (isArray(node) && node.length) {38    return node.reduce((acc: any, n: any) => {39      let code = tsTransform(n, context);40      if (!code) {41        return acc;42      }43      if (isArray(code)) {44        code = code.filter((c) => !!c);45        return acc.concat(code);46      }47      acc.push(code);48      return acc;49    }, []);50  }51  if (node.type === "Program") {52    let statements = tsTransform(node.body, context)53      .map(toStatement);54    // A bit of a hack, is there a better way to create a top-level node?55    const program = ts.createSourceFile("Program.ts", "", ts.ScriptTarget.Latest, false, ts.ScriptKind.TS);56    statements = templateInterfaceCode.statements.concat(statements);57    program.statements = statements;58    return program;59  }60  if (node.type === "FunctionDeclaration") {61    const parameters = node.params.map((p: any) => {62      if (p.type !== "Identifier") {63        throw new Error("No support for param.type " + p.type);64      }65      const name = ts.createIdentifier(p.name);66      const type = (node.name === "render" && p.name === "input")67        ? ts.createLiteralTypeNode(ts.createIdentifier("Input"))68        : ts.createKeywordTypeNode(ts.SyntaxKind.AnyKeyword);69      return ts.createParameter(undefined, undefined, undefined, name, undefined, type);70    });71    const statements = tsTransform(node.body, context)72      .map(toStatement);73    return ts.createFunctionDeclaration(74        undefined,75        undefined,76        undefined,77        ts.createIdentifier(node.name),78        undefined,79        parameters,80        ts.createKeywordTypeNode(ts.SyntaxKind.VoidKeyword),81        ts.createBlock(statements, true)82    );83  }84  if (node.type === "If") {85    const expression = tsTransform(node.test, context);86    const thenStatement = ts.createBlock(tsTransform(node.body, context).map(toStatement), true);87    const elseStatement = node.else88      ? ts.createBlock(tsTransform(node.else, context).map(toStatement), true)89      : undefined;90    return ts.createIf(91      expression,92      thenStatement,93      elseStatement94    );95  }96  if (node.type === "MemberExpression") {97    const expression = tsTransform(node.object, context);98    const name = tsTransform(node.property, context);99    return ts.createPropertyAccess(100      expression,101      name102    );103  }104  if (node.type === "Identifier") {105    return ts.createIdentifier(node.name);106  }107  if (node.type === "Literal") {108    if (typeof node.value === "object" && JSON.stringify(node.value) === "{}") {109      return ts.createObjectLiteral();110    }111    return ts.createLiteral(node.value);112  }113  if (node.type === "Html") {114    let argument: ts.Expression;115    if (node.argument.length > 1) {116      argument = node.argument.slice(1).reduce((sum: ts.BinaryExpression, arg: any) => {117        return ts.createAdd(sum, tsTransform(arg, context));118      }, tsTransform(node.argument[0], context));119    } else {120      argument = tsTransform(node.argument[0], context);121    }122    return ts.createCall(123      ts.createPropertyAccess(ts.createIdentifier("out"), ts.createIdentifier("w")),124      undefined,125      [argument]126    );127  }128  if (node.type === "FunctionCall") {129    return ts.createCall(130      tsTransform(node.callee, context),131      undefined,132      tsTransform(node.args, context)133    );134  }135  if (node.type === "Vars") {136    // Special case for single-line require statements137    // (ex: `var marko_runtime = require("marko/dist/html");`)138    // Switch to import statement139    if (140      node.declarations.length === 1 &&141      node.declarations[0].type === "VariableDeclarator" &&142      node.declarations[0].id.type === "Identifier" &&143      node.declarations[0].init.type === "FunctionCall" &&144      node.declarations[0].init.callee.type === "Identifier" &&145      node.declarations[0].init.callee.name === "require" &&146      node.declarations[0].init.args.length === 1 &&147      node.declarations[0].init.args[0].type === "Literal"148    ) {149      return ts.createImportDeclaration(150        undefined,151        undefined,152        ts.createImportClause(undefined, ts.createNamespaceImport(ts.createIdentifier(node.declarations[0].id.name))),153        ts.createLiteral(node.declarations[0].init.args[0].value)154      );155    }156    return ts.createVariableStatement(undefined, tsTransform(node.declarations, context));157  }158  if (node.type === "VariableDeclarator") {159    let typeNode: ts.TypeNode | undefined;160    // Special case for `var marko_template = ...`161    // add type annotation162    if (node.id.type === "Identifier" && node.id.name === "marko_template") {163      typeNode = ts.createLiteralTypeNode(ts.createIdentifier("Template"));164    }165    return ts.createVariableDeclaration(166      tsTransform(node.id, context),167      typeNode,168      tsTransform(node.init, context)169    );170  }171  if (node.type === "Assignment") {172    // Special case of `module.exports = ...;`173    if (174      node.left.type === "MemberExpression" &&175      node.left.object.type === "Identifier" &&176      node.left.object.name === "module" &&177      node.left.property.type === "Identifier" &&178      node.left.property.name === "exports"179    ) {180      return ts.createExportDefault(181        tsTransform(node.right, context)182      );183    }184    return ts.createAssignment(185      tsTransform(node.left, context),186      tsTransform(node.right, context)187    );188  }189  if (node.type === "Scriptlet") {190    const code = ts.createSourceFile("Scriptlet.ts", node.code, ts.ScriptTarget.Latest, false, ts.ScriptKind.TS);191    return code.statements;192  }193  if (node.type === "Code") {194    let lines = node.value.split("\n");195    if (!lines.length) {196      return;197    }198    // TODO: Only remove first and last lines, throw an error if not199    // this allows for inline JSDocs etc.200    lines = lines.reduce((acc: Array<string>, l: string) => {201      if (l.indexOf("/**@ts") > -1 || l.indexOf("*/") > -1) {202        return acc;203      }204      acc.push(l);205      return acc;206    }, []);207    const code = ts.createSourceFile("Code.ts", lines.join("\n"), ts.ScriptTarget.Latest, false, ts.ScriptKind.TS);208    return code.statements;209  }210}211const TYPESCRIPT_CONTEXT_KEY = "tsContext";212function transformMarkoAst(root: any, context: any) {213  const builder = context.builder;214  const tsContext = context[TYPESCRIPT_CONTEXT_KEY] || (context[TYPESCRIPT_CONTEXT_KEY] = {215    extractedRequires: []216  });217  const walker = context.createWalker({218    enter(node: any) {219      if (node.type === "Vars" && node.parentNode === null) {220        // Top-level vars, let's transform them221        const newDeclarations: Array<any> = [];222        node.declarations.forEach((declaration: any) => {223          if (224            declaration.type === "VariableDeclarator" &&225            declaration.id.type === "Identifier" &&226            declaration.id.name === "marko_template"227          ) {228            // Replace `var marko_template = module.exports = require("marko/src/html").t(__filename)`229            // with just `var marko_template = marko_html.t(__filename)`230            // (import will be hoisted to top, exports to the bottom)231            declaration = builder.variableDeclarator(232              "marko_template",233              builder.functionCall(234                builder.memberExpression(builder.identifier("marko_runtime"), builder.identifier("t")),235                [builder.identifier("__filename")]236              )237            );238            tsContext.extractedRequires.push(239              builder.var(240                builder.identifier("marko_runtime"),241                builder.require(242                  builder.literal(context.getModuleRuntimeTarget())243                )244              )245            );246            newDeclarations.push(declaration);247            return;248          }249          if (250            declaration.type === "VariableDeclarator" &&251            declaration.init.type === "FunctionCall" &&252            declaration.init.callee.type === "Identifier" &&253            declaration.init.callee.name === "require"254          ) {255            // Extract require statements like `marko_helpers = require("marko/dist/runtime/html/helpers")`256            tsContext.extractedRequires.push(257              builder.var(258                declaration.id,259                declaration.init260              )261            );262            return;263          }264          newDeclarations.push(declaration);265        });266        node.declarations = newDeclarations;267        return node;268      }269    },270    exit(node: any) {271      if (node.type === "Program") {272        let body: Array<any> = [];273        body = body.concat(tsContext.extractedRequires);274        body = body.concat(node.body);275        body = body.filter((n: any) => {276          if (n.type === "Literal" && n.value === "use strict") {277            return false;278          }279          return true;280        });281        body.push(282          builder.assignment(283            builder.moduleExports(),284            builder.identifier("marko_template")285          )286        );287        node.body = body;288        return node;289      }290    }291  });292  walker.walk(root);293}294export function compileFile(filename: string): string {295  const compiled = markoCompiler.compileFile(filename, {296    sourceOnly: false,297    writeVersionComment: false298  });299  transformMarkoAst(compiled.ast, compiled.context);300  const markoAst = compiled.ast;301  const resultFile = ts.createSourceFile(302    "product.marko.ts",303    "",304    ts.ScriptTarget.Latest,305    false,306    ts.ScriptKind.TS307  );308  const printer = ts.createPrinter({309      newLine: ts.NewLineKind.LineFeed,310  });311  const rootNode = tsTransform(markoAst, {});312  let result = printer.printNode(ts.EmitHint.Unspecified, rootNode, resultFile);313  result = "/* tslint:disable */\n" + result;314  return result;...

table.js

Source:table.js

...66		default:67			return o.toString();68	}69}70function tsTransform(ts) {71	// var date = [ts.getFullYear(), ts.getMonth() + 1, ts.getDate()].map(leftPadNum).join("-");72	var time = [ts.getHours(), ts.getMinutes(), ts.getSeconds()].map(leftPadNum).join(":");73	// var tz = (ts.getTimezoneOffset() >= 0 ? "GMT+" : "GMT-") + Math.abs(ts.getTimezoneOffset() / 60);74	// return `${date} ${time} ${tz}`;75	return wrapTag("code", time);76}77LogTableTemplate.onCreated(function() {78	this.tsTransform = (Template.currentData() || {}).tsTransform || tsTransform;79	this.msgTransform = (Template.currentData() || {}).msgTransform || msgTransform80});81LogTableTemplate.helpers({82	parsedData: function() {83		var context = Template.currentData() || {};84		return (context.logEntries || []).map(function(logEntry) {85			var ret = {86				v: logEntry.v,87				ll: logEntry.ll,88				tags: logEntry.tags,89			};90			ret.ts = Template.instance().tsTransform(logEntry.ts);91			ret.msg = EJSON.parse(logEntry.msg).map(Template.instance().msgTransform).join(" ");92			return ret;93		});94	}...

rollup.config.js

Source:rollup.config.js

1import sucrase from '@rollup/plugin-sucrase'2import nodeResolve from '@rollup/plugin-node-resolve'3import commonjs from '@rollup/plugin-commonjs'4import dts from 'rollup-plugin-dts'5import pkg from './package.json'6const tsTransform = sucrase({7  transforms: ['typescript'],8})9/** @type {import('rollup').RollupOptions[]} */10const configs = [11  {12    input: './src/index.ts',13    output: {14      format: 'cjs',15      dir: './dist',16      exports: 'named',17    },18    plugins: [tsTransform, commonjs(), nodeResolve()],19    external: [20      ...Object.keys(pkg.dependencies || {}),21      ...Object.keys(pkg.peerDependencies || {}),22    ],23  },24  {25    input: './src/index.ts',26    output: {27      format: 'esm',28      dir: './dist',29    },30    plugins: [dts()],31  },32  {33    input: ['./src/runtime/server.ts', './src/runtime/vercel-render.ts'],34    output: {35      format: 'esm',36      dir: './dist/runtime',37    },38    plugins: [tsTransform, commonjs(), nodeResolve()],39  },40]...

Using AI Code Generation

1const { tsTransform } = require('@storybook/addon-docs/mdx-compiler-plugin');2module.exports = {3  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],4  webpackFinal: async (config) => {5    config.module.rules.push({6      loader: require.resolve('@storybook/source-loader'),7      options: { parser: 'typescript' },8    });9    config.module.rules.push({10        {11          options: {12          },13        },14        {15          options: {16          },17        },18    });19    config.resolve.extensions.push('.ts', '.tsx');20    return config;21  },22};23import React from 'react';24import { Story, Meta } from '@storybook/react/types-6-0';25import Button, { ButtonProps } from './Button';26export default {27  argTypes: {28    backgroundColor: { control: 'color' },29  },30} as Meta;31const Template: Story<ButtonProps> = (args) => <Button {...args} />;32export const Primary = Template.bind({});33Primary.args = {34};35export const Secondary = Template.bind({});36Secondary.args = {37};38export const Large = Template.bind({});39Large.args = {40};41export const Small = Template.bind({});42Small.args = {43};44import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';45import Button, { ButtonProps } from './Button';46<Meta title="Example/Button" component={Button} />47import {

Using AI Code Generation

1import { tsTransform } from 'storybook-root-alias';2module.exports = (config) => {3  config.module.rules.push({4    test: /\.(ts|tsx)$/,5      {6        loader: require.resolve('ts-loader'),7        options: {8          getCustomTransformers: () => ({9            before: [tsTransform(config)],10          }),11        },12      },13  });14  config.resolve.extensions.push('.ts', '.tsx');15  return config;16};17module.exports = {18  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],19  babel: async (options) => ({20    plugins: [...options.plugins, 'babel-plugin-root-import'],21  }),22  webpackFinal: (config) => {23    return require('./test.js')(config);24  },25};26import { addDecorator } from '@storybook/react';27import { withRootAlias } from 'storybook-root-alias';28addDecorator(withRootAlias());

Using AI Code Generation

1const { tsTransform } = require('storybook-root-cause');2const ts = require('typescript');3module.exports = {4  process(src, path) {5    if (path.endsWith('.ts') || path.endsWith('.tsx')) {6      return tsTransform(src, path, ts);7    }8    return src;9  },10};

Using AI Code Generation

1const { tsTransform } = require('@nrwl/storybook/plugins/root-config');2const { getTsConfigPath } = require('@nrwl/react/plugins/webpack');3module.exports = async ({ config }) => {4  config.module.rules = config.module.rules.map((rule) => {5    if (rule.test.toString() === '/\\.tsx?$/') {6      return {7          {8            loader: require.resolve('ts-loader'),9            options: {10              getCustomTransformers: (program) => ({11                before: [tsTransform(program)],12              }),13              configFile: getTsConfigPath(__dirname),14            },15          },16      };17    }18    return rule;19  });20  return config;21};22module.exports = {23  stories: ['../src/**/*.stories.@(ts|tsx)'],24  core: {25  },26  webpackFinal: require('../test'),27};28export const parameters = {29  actions: { argTypesRegex: '^on[A-Z].*' },30};31module.exports = {32  stories: ['../src/**/*.stories.@(ts|tsx)'],33  webpackFinal: async (config) => {34    return config;35  },36};37module.exports = {38  stories: ['../src/**/*.stories.@(ts|tsx)'],39  webpackFinal: async (config) => {40    return config;41  },42};43export const parameters = {44  actions: { argTypesRegex: '^on[A-Z].*' },45};

Using AI Code Generation

1const { tsTransform } = require('storybook-root-elements');2const { getOptions } = require('loader-utils');3module.exports = function(source) {4  const options = getOptions(this);5  return tsTransform(source, options);6};7const path = require('path');8module.exports = {9  module: {10      {11        loader: path.resolve('test.js'),12        options: {13        },14      },15  },16};17const { tsTransform } = require('storybook-root-elements');18module.exports = function(source) {19  return tsTransform(source, {20  });21};22module.exports = {23  transform: {24    '^.+\\.(ts|js|html)$': path.resolve('test.js'),25  },26};

Using AI Code Generation

1import { tsTransform } from 'storybook-root';2import { tsTransform } from '@storybook-root';3import { tsTransform } from 'storybook-root';4import { tsTransform } from '@storybook-root';5import { tsTransform } from 'storybook-root';6import { tsTransform } from '@storybook-root';7import { tsTransform } from 'storybook-root';8import { tsTransform } from '@storybook-root';9import { tsTransform } from 'storybook-root';10import { tsTransform } from '@storybook-root';11import { tsTransform } from 'storybook-root';12import { tsTransform } from '@storybook-root';13import { tsTransform } from 'storybook-root';14import { tsTransform } from '@storybook-root';15import { tsTransform } from 'storybook-root';16import { tsTransform } from '@storybook-root';17import { tsTransform } from 'storybook-root';18import { tsTransform } from '@storybook-root';19import { tsTransform } from 'storybook-root';20import { tsTransform } from '@storybook-root';

Using AI Code Generation

1const { tsTransform } = require("storybook-root-alias/lib/transform");2module.exports = {3  process(src, path) {4    return tsTransform(src, path);5  }6};

Using AI Code Generation

1const { tsTransform } = require('storybook-root');2const path = require('path');3const fs = require('fs');4const ts = require('typescript');5const tsConfig = require('./tsconfig.json');6const tsConfigPaths = require('tsconfig-paths');7const tsConfigPath = path.resolve(__dirname, './tsconfig.json');8const tsConfigPathsConfig = tsConfigPaths.loadConfig(tsConfigPath);9const { baseUrl, paths } = tsConfigPathsConfig;10const { compilerOptions } = tsConfig;11const tsConfigOptions = {12};13const jsFilePath = tsTransform('src/index.ts', tsConfigOptions);14console.log('jsFilePath', jsFilePath);15MIT © [sauravhiremath](

Using AI Code Generation

1const tsTransform = require('storybook-root-alias/tsTransform').default;2const { tsConfigPaths } = require('storybook-root-alias/tsConfigPaths');3module.exports = {4  stories: ['../src/**/*.stories.@(ts|tsx|js|jsx|mdx)'],5  webpackFinal: async (config) => {6    config.resolve.plugins = [new TsconfigPathsPlugin({ configFile: './tsconfig.json' })];7    config.resolve.extensions.push('.ts', '.tsx');8      tsTransform(tsConfigPaths('./tsconfig.json')),9    ];10    return config;11  },12};13{14  "compilerOptions": {15    "paths": {16    }17  }18}19{20  "scripts": {21  },22  "devDependencies": {23  }24}25module.exports = {26  stories: ['../src/**/*.stories.@(ts|tsx|js|jsx|mdx)'],27  webpackFinal: async (config) => {28    config.resolve.plugins = [new TsconfigPathsPlugin({ configFile: './tsconfig.json' })];29    config.resolve.extensions.push('.ts', '.tsx');30      tsTransform(tsConfigPaths('./tsconfig.json')),31    ];32    return config;33  },34};35import { addDecorator } from '@storybook/react';36import { withA11y } from '@storybook/addon-a11y';37addDecorator(withA11y);38import { addons } from '@storybook/addons';39import { themes } from '@storybook/theming';40addons.setConfig({41});

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.