How to use hmr method in storybook-root

Best JavaScript code snippet using storybook-root

app-update.ts

Source:app-update.ts

1import  * as d from '../../declarations';2import { appError, clearDevServerModal } from './app-error';3import { hmrComponents } from './hmr-components';4import { hmrExternalStyles } from './hmr-external-styles';5import { hmrImages } from './hmr-images';6import { hmrInlineStyles } from './hmr-inline-styles';7import { logBuild, logReload } from './logger';8export function appUpdate(win: d.DevClientWindow, doc: Document, config: d.DevClientConfig, buildResults: d.BuildResults) {9  try {10    // remove any app errors that may already be showing11    clearDevServerModal(doc);12    if (buildResults.hasError) {13      // looks like we've got an error14      // let's show the error all pretty like15      appError(win, doc, config, buildResults);16      return;17    }18    if (win['s-initial-load']) {19      // this page is the initial dev server loading page20      // and the build has finished without errors21      // let's make sure the url is at the root22      // and we've unregistered any existing service workers23      // then let's refresh the page from the root of the server24      appReset(win, config).then(() => {25        logReload(`Initial load`);26        win.location.reload(true);27      });28      return;29    }30    if (buildResults.hmr) {31      appHmr(win, doc, buildResults.hmr);32    }33  } catch (e) {34    console.error(e);35  }36}37function appHmr(win: Window, doc: Document, hmr: d.HotModuleReplacement) {38  let shouldWindowReload = false;39  if (hmr.indexHtmlUpdated) {40    logReload(`Updated index.html`);41    shouldWindowReload = true;42  }43  if (hmr.serviceWorkerUpdated) {44    logReload(`Updated Service Worker: sw.js`);45    shouldWindowReload = true;46  }47  if (hmr.scriptsAdded && hmr.scriptsAdded.length > 0) {48    logReload(`Added scripts: ${hmr.scriptsAdded.join(', ')}`);49    shouldWindowReload = true;50  }51  if (hmr.scriptsDeleted && hmr.scriptsDeleted.length > 0) {52    logReload(`Deleted scripts: ${hmr.scriptsDeleted.join(', ')}`);53    shouldWindowReload = true;54  }55  if (hmr.excludeHmr && hmr.excludeHmr.length > 0) {56    logReload(`Excluded From Hmr: ${hmr.excludeHmr.join(', ')}`);57    shouldWindowReload = true;58  }59  if (shouldWindowReload) {60    win.location.reload(true);61    return;62  }63  // let's do some hot module replacement shall we64  doc.documentElement.setAttribute('data-hmr', hmr.versionId);65  if (hmr.componentsUpdated) {66    hmrComponents(doc.documentElement, hmr.versionId, hmr.componentsUpdated);67  }68  if (hmr.inlineStylesUpdated) {69    logBuild(`Updated styles: ${hmr.inlineStylesUpdated.map(s => s.styleTag).reduce((arr, v) => {70      if (!arr.includes(v)) {71        arr.push(v);72      }73      return arr;74    }, []).sort().join(', ')}`);75    hmrInlineStyles(doc.documentElement, hmr.versionId, hmr.inlineStylesUpdated);76  }77  if (hmr.externalStylesUpdated) {78    logBuild(`Updated stylesheets: ${hmr.externalStylesUpdated.sort().join(', ')}`);79    hmrExternalStyles(doc.documentElement, hmr.versionId, hmr.externalStylesUpdated);80  }81  if (hmr.imagesUpdated) {82    logBuild(`Updated images: ${hmr.imagesUpdated.sort().join(', ')}`);83    hmrImages(win, doc, hmr.versionId, hmr.imagesUpdated);84  }85}86export function appReset(win: d.DevClientWindow, config: d.DevClientConfig) {87  // we're probably at some ugly url88  // let's update the url to be the expect root url: /89  win.history.replaceState({}, 'App', config.baseUrl);90  if (!win.navigator.serviceWorker) {91    return Promise.resolve();92  }93  // it's possible a service worker is already registered94  // for this localhost url from some other app's development95  // let's ensure we entirely remove the service worker for this domain96  return win.navigator.serviceWorker.getRegistration().then(swRegistration => {97    if (swRegistration) {98      return swRegistration.unregister().then(hasUnregistered => {99        if (hasUnregistered) {100          logBuild(`unregistered service worker`);101        }102      });103    }104    return Promise.resolve();105  });...

plugin.hmr.ts

Source:plugin.hmr.ts

1import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';2import { addValueToVariable, tryAddFile, tryDelFile } from '../utils/alain';3import { HMR_CONTENT } from '../utils/contents';4import {5  addPackageToPackageJson,6  getAngular,7  getJSON,8  overwriteAngular,9  overwriteJSON,10  removePackageFromPackageJson,11} from '../utils/json';12import { getProjectFromWorkspace } from '../utils/project';13import { PluginOptions } from './interface';14function configToAngularJson(host: Tree, options: PluginOptions) {15  const json = getAngular(host);16  const project = getProjectFromWorkspace(json, options.project);17  // add build config18  (project.targets || project.architect)!.build!.configurations.hmr = {19    fileReplacements: [20      {21        replace: `${options.sourceRoot}/environments/environment.ts`,22        with: `${options.sourceRoot}/environments/environment.hmr.ts`,23      },24    ],25  };26  // add serve config27  (project.targets || project.architect)!.serve!.configurations.hmr = {28    browserTarget: `${project.name}:build:hmr`,29    hmr: true,30  };31  overwriteAngular(host, json);32}33function envConfig(host: Tree, options: PluginOptions) {34  const defEnvPath = `${options.sourceRoot}/environments/environment.ts`;35  const defContent = host.get(defEnvPath)!.content;36  if (!host.exists(defEnvPath)) return;37  // 1. update default env file38  addValueToVariable(host, defEnvPath, 'environment', 'hmr: false');39  // 2. update prod env file40  addValueToVariable(41    host,42    `${options.sourceRoot}/environments/environment.prod.ts`,43    'environment',44    'hmr: false',45  );46  // 3. copy default env file to hmr file47  const hmrEnvPath = `${options.sourceRoot}/environments/environment.hmr.ts`;48  host.create(hmrEnvPath, defContent);49  addValueToVariable(host, hmrEnvPath, 'environment', 'hmr: true');50}51function addNodeTypeToTsconfig(host: Tree, options: PluginOptions) {52  const tsConfigPath = `${options.root}/tsconfig.app.json`;53  if (!host.exists(tsConfigPath)) {54    console.warn(`Not found ${tsConfigPath} file`);55    return;56  }57  const json = getJSON(host, tsConfigPath);58  const TYPENAME = 'node';59  if (options.type === 'add') {60    json.compilerOptions.types = [TYPENAME];61  } else {62    const idx = (json.compilerOptions.types as string[]).findIndex(w => w === TYPENAME);63    if (idx !== -1) {64      (json.compilerOptions.types as string[]).splice(idx, 1);65    }66  }67  overwriteJSON(host, tsConfigPath, json);68}69export function pluginHmr(options: PluginOptions): Rule {70  return (host: Tree) => {71    // 1. add package72    (options.type === 'add' ? addPackageToPackageJson : removePackageFromPackageJson)(73      host,74      ['@angularclass/hmr@DEP-0.0.0-PLACEHOLDER'],75      'devDependencies',76    );77    // 2. add run scripts78    (options.type === 'add' ? addPackageToPackageJson : removePackageFromPackageJson)(79      host,80      ['hmr@ng serve -c=hmr'],81      'scripts',82    );83    // 3. add angular.json84    configToAngularJson(host, options);85    if (options.type === 'add') {86      // 4. create a hmr.ts file87      tryAddFile(host, `${options.sourceRoot}/hmr.ts`, HMR_CONTENT.HMR_DOT_TS);88      // 5. update main.ts89      tryAddFile(host, `${options.sourceRoot}/main.ts`, HMR_CONTENT.HMR_MAIN_DOT_TS);90    } else {91      // 4. remove a hmr.ts file92      tryDelFile(host, `${options.sourceRoot}/hmr.ts`);93      // 5. update main.ts94      tryAddFile(host, `${options.sourceRoot}/main.ts`, HMR_CONTENT.NO_HMR_MAIN_DOT_TS);95    }96    // 7. fix not found types97    addNodeTypeToTsconfig(host, options);98  };...

hmr-window.ts

Source:hmr-window.ts

1import { HotModuleReplacement } from '../../declarations';2import { hmrComponents } from './hmr-components';3import { hmrExternalStyles } from './hmr-external-styles';4import { hmrImages } from './hmr-images';5import { hmrInlineStyles } from './hmr-inline-styles';6import { setHmrAttr } from './hmr-util';7export const hmrWindow = (data: { window: Window; hmr: any }) => {8  const results = {9    updatedComponents: [] as string[],10    updatedExternalStyles: [] as string[],11    updatedInlineStyles: [] as string[],12    updatedImages: [] as string[],13    versionId: '',14  };15  try {16    if (17      !data ||18      !data.window ||19      !data.window.document.documentElement ||20      !data.hmr ||21      typeof data.hmr.versionId !== 'string'22    ) {23      return results;24    }25    const win = data.window;26    const doc = win.document;27    const hmr: HotModuleReplacement = data.hmr;28    const documentElement = doc.documentElement;29    const versionId = hmr.versionId;30    results.versionId = versionId;31    if (hmr.componentsUpdated) {32      results.updatedComponents = hmrComponents(documentElement, versionId, hmr.componentsUpdated);33    }34    if (hmr.inlineStylesUpdated) {35      results.updatedInlineStyles = hmrInlineStyles(documentElement, versionId, hmr.inlineStylesUpdated);36    }37    if (hmr.externalStylesUpdated) {38      results.updatedExternalStyles = hmrExternalStyles(documentElement, versionId, hmr.externalStylesUpdated);39    }40    if (hmr.imagesUpdated) {41      results.updatedImages = hmrImages(win, doc, versionId, hmr.imagesUpdated);42    }43    setHmrAttr(documentElement, versionId);44  } catch (e) {45    console.error(e);46  }47  return results;...

Using AI Code Generation

1import { configure } from '@storybook/react';2import { addDecorator } from '@storybook/react';3import { withKnobs } from '@storybook/addon-knobs';4import { withInfo } from '@storybook/addon-info';5import { withOptions } from '@storybook/addon-options';6import { configureViewport } from '@storybook/addon-viewport';7import { withA11y } from '@storybook/addon-a11y';8import { withConsole } from '@storybook/addon-console';9import { setDefaults } from '@storybook/addon-info';10import { setOptions } from '@storybook/addon-options';11import { addParameters } from '@storybook/react';12import { withTests } from '@storybook/addon-jest';13import { withPerformance } from 'storybook-addon-performance';14import { withThemesProvider } from 'storybook-addon-styled-component-theme';15import { withContexts } from '@storybook/addon-contexts/react';16import { withCode } from 'storybook-addon-code';17import { withPropsTable } from 'storybook-addon-react-docgen';18import { withSmartKnobs } from 'storybook-addon-smart-knobs';19setOptions({20});21setDefaults({22  styles: stylesheet => {23    stylesheet.infoBody = {24    };25    return stylesheet;26  },27});28addParameters({29  options: {30  },31});32configureViewport({33  viewports: {34    iphone6: {35      styles: {36      },37    },38  },39});40addParameters({41    {

Using AI Code Generation

1import { configure } from '@storybook/react';2import { setConfig } from 'react-hot-loader';3setConfig({ pureSFC: true });4configure(require.context('../src', true, /\.stories\.js$/), module);5import { configure } from '@storybook/react';6import { setConfig } from 'react-hot-loader';7setConfig({ pureSFC: true });8configure(require.context('../src', true, /\.stories\.js$/), module);9module.exports = (baseConfig, env, defaultConfig) => {10  const config = defaultConfig;11  config.module.rules.push({12  });13  return config;14};15"scripts": {16  },17  "devDependencies": {18  }19module.exports = (baseConfig, env, defaultConfig) => {20    const config = defaultConfig;21    config.module.rules.push({22    });23    return config;24  };25"scripts": {26  },27  "devDependencies": {28  }

Using AI Code Generation

1import { configure } from 'storybook-root-configuration'2configure(require.context('../src', true, /\.stories\.tsx$/), module)3import { configure } from 'storybook-root-configuration'4configure(require.context('../src', true, /\.stories\.tsx$/), module)5const path = require('path')6module.exports = ({ config }) => {7  config.module.rules.push({8    test: /\.(ts|tsx)$/,9      {10        loader: require.resolve('awesome-typescript-loader'),11      },12      {13        loader: require.resolve('react-docgen-typescript-loader'),14      },15  })16  config.resolve.extensions.push('.ts', '.tsx')17  config.resolve.alias = {18    'storybook-root-configuration': path.resolve(__dirname, '../test.js'),19  }20}21module.exports = {22  webpackFinal: async config => {23    config.resolve.alias = {24      'storybook-root-configuration': path.resolve(__dirname, '../test.js'),25    }26  },27}28import { addDecorator } from '@storybook/react'29import { withInfo } from '@storybook/addon-info'30import { withKnobs } from '@storybook/addon-knobs'31addDecorator(withInfo)32addDecorator(withKnobs)33import '@storybook/addon-actions/register'34import '@storybook/addon-links/register'35import '@storybook/addon-knobs/register'

Using AI Code Generation

1import { configure } from 'storybook-root-configuration';2import { addDecorator } from '@storybook/react';3configure(require.context('../src', true, /\.stories\.js$/), module);4addDecorator((storyFn) => {5  return storyFn();6});7import { configure } from 'storybook-root-configuration';8configure(require.context('../src', true, /\.stories\.js$/), module);

Using AI Code Generation

1import { configure } from '@storybook/react';2import '../src/index.css';3import { hmr } from 'storybook-addon-react-live-edit/dist/hmr';4const req = require.context('../src', true, /\.stories\.js$/);5function loadStories() {6  req.keys().forEach(filename => req(filename));7}8hmr(module, module.id, loadStories, module);9const path = require('path');10const fs = require('fs');11const webpack = require('webpack');12const { getReactLiveBabelLoader } = require('storybook-addon-react-live-edit/dist/babel-loader');13module.exports = async ({ config, mode }) => {14  config.module.rules.push({15    loaders: [getReactLiveBabelLoader()],16    include: [path.resolve(__dirname, '../src')],17  });18  config.resolve.alias = {19    '@storybook/react': path.resolve(__dirname, '../node_modules/@storybook/react'),20  };21  return config;22};

Using AI Code Generation

1import { configure } from '@storybook/react';2import { configure as configureRoot } from 'storybook-root-configuration';3const req = require.context('../src', true, /.stories.js$/);4function loadStories() {5  req.keys().forEach(filename => req(filename));6}7configure(loadStories, module);8configureRoot(module);9import { configure } from '@storybook/react';10import { configure as configureRoot } from 'storybook-root-configuration';11configureRoot(module);

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.