diff --git a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts index d45dae975197..65558909860a 100644 --- a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts @@ -18,7 +18,6 @@ import { createBabelLoader } from './babel-loader-preview'; import { toRequireContextString } from './to-require-context'; import { useBaseTsSupport } from '../config/useBaseTsSupport'; -import { getPreviewBodyHtml, getPreviewHeadHtml } from '../template'; import { loadEnv, nodeModulesPaths } from '../common/utils'; import { es6Transpiler } from '../common/es6Transpiler'; @@ -60,14 +59,11 @@ export default async ({ }: any) => { const logLevel = await presets.apply('logLevel', undefined); const frameworkOptions = await presets.apply(`${framework}Options`, {}); - const headHtmlSnippet = await presets.apply( - 'previewHead', - getPreviewHeadHtml(configDir, process.env) - ); - const bodyHtmlSnippet = await presets.apply( - 'previewBody', - getPreviewBodyHtml(configDir, process.env) - ); + + const headHtmlSnippet = await presets.apply('previewHeadTemplate'); + const bodyHtmlSnippet = await presets.apply('previewBodyTemplate'); + const template = await presets.apply('previewMainTemplate'); + const { raw, stringified } = loadEnv({ production: true }); const babelLoader = createBabelLoader(babelOptions, framework); const isProd = configType === 'PRODUCTION'; @@ -159,7 +155,7 @@ export default async ({ removeStyleLinkTypeAttributes: true, useShortDoctype: true, }, - template: require.resolve(`../templates/index.ejs`), + template, }), new DefinePlugin({ 'process.env': stringified, diff --git a/lib/builder-webpack4/src/template.ts b/lib/builder-webpack4/src/template.ts deleted file mode 100644 index d37cf222b2b8..000000000000 --- a/lib/builder-webpack4/src/template.ts +++ /dev/null @@ -1,31 +0,0 @@ -import path from 'path'; -import fs from 'fs'; - -const interpolate = (string: string, data: Record = {}) => - Object.entries(data).reduce((acc, [k, v]) => acc.replace(new RegExp(`%${k}%`, 'g'), v), string); - -export function getPreviewBodyHtml(configDirPath: string, interpolations?: Record) { - const base = fs.readFileSync(path.resolve(__dirname, 'templates/base-preview-body.html'), 'utf8'); - - const bodyHtmlPath = path.resolve(configDirPath, 'preview-body.html'); - let result = base; - - if (fs.existsSync(bodyHtmlPath)) { - result = fs.readFileSync(bodyHtmlPath, 'utf8') + result; - } - - return interpolate(result, interpolations); -} - -export function getPreviewHeadHtml(configDirPath: string, interpolations?: Record) { - const base = fs.readFileSync(path.resolve(__dirname, 'templates/base-preview-head.html'), 'utf8'); - const headHtmlPath = path.resolve(configDirPath, 'preview-head.html'); - - let result = base; - - if (fs.existsSync(headHtmlPath)) { - result += fs.readFileSync(headHtmlPath, 'utf8'); - } - - return interpolate(result, interpolations); -} diff --git a/lib/builder-webpack4/src/templates/base-preview-body.html b/lib/builder-webpack4/src/templates/base-preview-body.html deleted file mode 100644 index 71c0b67fde9b..000000000000 --- a/lib/builder-webpack4/src/templates/base-preview-body.html +++ /dev/null @@ -1,16 +0,0 @@ -
-
-

No Preview

-

Sorry, but you either have no stories or none are selected somehow.

-
    -
  • Please check the Storybook config.
    • -
  • Try reloading the page.
    • -
-

If the problem persists, check the browser console, or the terminal you've run Storybook from.

-
-
- -
- 

-  

-

diff --git a/lib/builder-webpack4/src/templates/base-preview-head.html b/lib/builder-webpack4/src/templates/base-preview-head.html
deleted file mode 100644
index f6f6f49a9e6b..000000000000
--- a/lib/builder-webpack4/src/templates/base-preview-head.html
+++ /dev/null
@@ -1,134 +0,0 @@
-
-
-
-
-
diff --git a/lib/builder-webpack4/src/templates/index.ejs b/lib/builder-webpack4/src/templates/index.ejs
deleted file mode 100644
index 987898611ebc..000000000000
--- a/lib/builder-webpack4/src/templates/index.ejs
+++ /dev/null
@@ -1,47 +0,0 @@
-
-
-  
-    
-    <%= options.title || 'Storybook'%>
-
-    <% if (files.favicon) { %>
-    
-    <% } %>
-
-    
-
-    <% if (typeof headHtmlSnippet !== 'undefined') { %> <%= headHtmlSnippet %> <% } %> <%
-    files.css.forEach(file => { %>
-    
-    <% }); %>
-
-    
-  
-  
-    <% if (typeof bodyHtmlSnippet !== 'undefined') { %>
-      <%= bodyHtmlSnippet %>
-    <% } %>
-
-    

-    

-
-    <% if (typeof globals !== 'undefined' && Object.keys(globals).length) { %>
-      
-    <% } %>
-    
-    <% files.js.forEach(file => { %>
-      
-    <% }); %>
-  
-
diff --git a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
index 3b2a7ea31057..05f3cc70af1a 100644
--- a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -18,7 +18,6 @@ import { createBabelLoader } from './babel-loader-preview';
 
 import { toRequireContextString } from './to-require-context';
 import { useBaseTsSupport } from '../config/useBaseTsSupport';
-import { getPreviewBodyHtml, getPreviewHeadHtml } from '../template';
 import { loadEnv, nodeModulesPaths } from '../common/utils';
 import { es6Transpiler } from '../common/es6Transpiler';
 
@@ -60,14 +59,11 @@ export default async ({
 }: any) => {
   const logLevel = await presets.apply('logLevel', undefined);
   const frameworkOptions = await presets.apply(`${framework}Options`, {});
-  const headHtmlSnippet = await presets.apply(
-    'previewHead',
-    getPreviewHeadHtml(configDir, process.env)
-  );
-  const bodyHtmlSnippet = await presets.apply(
-    'previewBody',
-    getPreviewBodyHtml(configDir, process.env)
-  );
+
+  const headHtmlSnippet = await presets.apply('previewHeadTemplate');
+  const bodyHtmlSnippet = await presets.apply('previewBodyTemplate');
+  const template = await presets.apply('previewMainTemplate');
+
   const { raw, stringified } = loadEnv({ production: true });
   const babelLoader = createBabelLoader(babelOptions, framework);
   const isProd = configType === 'PRODUCTION';
@@ -159,7 +155,7 @@ export default async ({
           removeStyleLinkTypeAttributes: true,
           useShortDoctype: true,
         },
-        template: require.resolve(`../templates/index.ejs`),
+        template,
       }),
       new DefinePlugin({
         'process.env': stringified,
diff --git a/lib/builder-webpack5/src/template.ts b/lib/builder-webpack5/src/template.ts
deleted file mode 100644
index d37cf222b2b8..000000000000
--- a/lib/builder-webpack5/src/template.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import path from 'path';
-import fs from 'fs';
-
-const interpolate = (string: string, data: Record = {}) =>
-  Object.entries(data).reduce((acc, [k, v]) => acc.replace(new RegExp(`%${k}%`, 'g'), v), string);
-
-export function getPreviewBodyHtml(configDirPath: string, interpolations?: Record) {
-  const base = fs.readFileSync(path.resolve(__dirname, 'templates/base-preview-body.html'), 'utf8');
-
-  const bodyHtmlPath = path.resolve(configDirPath, 'preview-body.html');
-  let result = base;
-
-  if (fs.existsSync(bodyHtmlPath)) {
-    result = fs.readFileSync(bodyHtmlPath, 'utf8') + result;
-  }
-
-  return interpolate(result, interpolations);
-}
-
-export function getPreviewHeadHtml(configDirPath: string, interpolations?: Record) {
-  const base = fs.readFileSync(path.resolve(__dirname, 'templates/base-preview-head.html'), 'utf8');
-  const headHtmlPath = path.resolve(configDirPath, 'preview-head.html');
-
-  let result = base;
-
-  if (fs.existsSync(headHtmlPath)) {
-    result += fs.readFileSync(headHtmlPath, 'utf8');
-  }
-
-  return interpolate(result, interpolations);
-}
diff --git a/lib/builder-webpack5/src/templates/base-preview-body.html b/lib/builder-webpack5/src/templates/base-preview-body.html
deleted file mode 100644
index 71c0b67fde9b..000000000000
--- a/lib/builder-webpack5/src/templates/base-preview-body.html
+++ /dev/null
@@ -1,16 +0,0 @@
-

-  

-    
No Preview

-    
Sorry, but you either have no stories or none are selected somehow.

-    
    
-      
  • Please check the Storybook config.
    • 
-      
  • Try reloading the page.
    • 
-    

-    
If the problem persists, check the browser console, or the terminal you've run Storybook from.

-  

-

-
-

-  

-  

-

diff --git a/lib/builder-webpack5/src/templates/base-preview-head.html b/lib/builder-webpack5/src/templates/base-preview-head.html
deleted file mode 100644
index f6f6f49a9e6b..000000000000
--- a/lib/builder-webpack5/src/templates/base-preview-head.html
+++ /dev/null
@@ -1,134 +0,0 @@
-
-
-
-
-
diff --git a/lib/builder-webpack5/src/templates/index.ejs b/lib/builder-webpack5/src/templates/index.ejs
deleted file mode 100644
index 987898611ebc..000000000000
--- a/lib/builder-webpack5/src/templates/index.ejs
+++ /dev/null
@@ -1,47 +0,0 @@
-
-
-  
-    
-    <%= options.title || 'Storybook'%>
-
-    <% if (files.favicon) { %>
-    
-    <% } %>
-
-    
-
-    <% if (typeof headHtmlSnippet !== 'undefined') { %> <%= headHtmlSnippet %> <% } %> <%
-    files.css.forEach(file => { %>
-    
-    <% }); %>
-
-    
-  
-  
-    <% if (typeof bodyHtmlSnippet !== 'undefined') { %>
-      <%= bodyHtmlSnippet %>
-    <% } %>
-
-    

-    

-
-    <% if (typeof globals !== 'undefined' && Object.keys(globals).length) { %>
-      
-    <% } %>
-    
-    <% files.js.forEach(file => { %>
-      
-    <% }); %>
-  
-
diff --git a/lib/core-server/src/common/common-preset.ts b/lib/core-server/src/common/common-preset.ts
index e1cbc8d6db37..b7bd3ff8c18b 100644
--- a/lib/core-server/src/common/common-preset.ts
+++ b/lib/core-server/src/common/common-preset.ts
@@ -1,4 +1,10 @@
 import loadCustomBabelConfig from '../utils/load-custom-babel-config';
+import {
+  getPreviewBodyTemplate,
+  getPreviewHeadTemplate,
+  getManagerMainTemplate,
+  getPreviewMainTemplate,
+} from '../utils/template';
 
 import { babelConfig } from './babel';
 
@@ -12,3 +18,13 @@ export const babel = async (_: unknown, options: { configDir: string; presets: a
 
 export const logLevel = (previous: any, options: { loglevel: any }) =>
   previous || options.loglevel || 'info';
+
+export const previewHeadTemplate = (base: any, { configDir }: { configDir: string }) =>
+  getPreviewHeadTemplate(configDir, process.env);
+
+export const previewBodyTemplate = (base: any, { configDir }: { configDir: string }) =>
+  getPreviewBodyTemplate(configDir, process.env);
+
+export const previewMainTemplate = () => getPreviewMainTemplate();
+
+export const managerMainTemplate = () => getManagerMainTemplate();
diff --git a/lib/core-server/src/manager/manager-webpack.config.ts b/lib/core-server/src/manager/manager-webpack.config.ts
index 78a9c169e1ea..e246c563c120 100644
--- a/lib/core-server/src/manager/manager-webpack.config.ts
+++ b/lib/core-server/src/manager/manager-webpack.config.ts
@@ -12,7 +12,7 @@ import themingPaths from '@storybook/theming/paths';
 import uiPaths from '@storybook/ui/paths';
 
 import readPackage from 'read-pkg-up';
-import { getManagerHeadHtml } from '../utils/template';
+import { getManagerHeadTemplate } from '../utils/template';
 
 import { babelLoader } from './babel-loader-manager';
 import { resolvePathInStorybookCache } from '../utils/resolve-path-in-sb-cache';
@@ -36,7 +36,7 @@ export default async ({
   const logLevel = await presets.apply('logLevel', undefined);
   const headHtmlSnippet = await presets.apply(
     'managerHead',
-    getManagerHeadHtml(configDir, process.env)
+    getManagerHeadTemplate(configDir, process.env)
   );
   const isProd = configType === 'PRODUCTION';
   const refsTemplate = fse.readFileSync(path.join(__dirname, 'virtualModuleRef.template.js'), {
diff --git a/lib/core-server/src/utils/template.test.ts b/lib/core-server/src/utils/template.test.ts
index dfc7da05dad0..f347820af564 100644
--- a/lib/core-server/src/utils/template.test.ts
+++ b/lib/core-server/src/utils/template.test.ts
@@ -1,5 +1,5 @@
 import mock from 'mock-fs';
-import { getPreviewHeadHtml, getPreviewBodyHtml } from './template';
+import { getPreviewHeadTemplate, getPreviewBodyTemplate } from './template';
 
 const HEAD_HTML_CONTENTS = '';
 const BASE_HTML_CONTENTS = '';
@@ -21,7 +21,7 @@ describe('server.getPreviewHeadHtml', () => {
     });
 
     it('return an empty string', () => {
-      const result = getPreviewHeadHtml('./config');
+      const result = getPreviewHeadTemplate('./config');
       expect(result).toEqual(BASE_HTML_CONTENTS);
     });
   });
@@ -41,7 +41,7 @@ describe('server.getPreviewHeadHtml', () => {
     });
 
     it('return the contents of the file', () => {
-      const result = getPreviewHeadHtml('./config');
+      const result = getPreviewHeadTemplate('./config');
       expect(result).toEqual(BASE_HTML_CONTENTS + HEAD_HTML_CONTENTS);
     });
   });
@@ -61,7 +61,7 @@ describe('server.getPreviewBodyHtml', () => {
     });
 
     it('return an empty string', () => {
-      const result = getPreviewBodyHtml('./config');
+      const result = getPreviewBodyTemplate('./config');
       expect(result).toEqual(BASE_BODY_HTML_CONTENTS);
     });
   });
@@ -81,7 +81,7 @@ describe('server.getPreviewBodyHtml', () => {
     });
 
     it('return the contents of the file', () => {
-      const result = getPreviewBodyHtml('./config');
+      const result = getPreviewBodyTemplate('./config');
       expect(result).toEqual(BODY_HTML_CONTENTS + BASE_BODY_HTML_CONTENTS);
     });
   });
diff --git a/lib/core-server/src/utils/template.ts b/lib/core-server/src/utils/template.ts
index d86fb03ae55f..12a7c1c9e2b7 100644
--- a/lib/core-server/src/utils/template.ts
+++ b/lib/core-server/src/utils/template.ts
@@ -4,7 +4,10 @@ import fs from 'fs';
 const interpolate = (string: string, data: Record = {}) =>
   Object.entries(data).reduce((acc, [k, v]) => acc.replace(new RegExp(`%${k}%`, 'g'), v), string);
 
-export function getPreviewBodyHtml(configDirPath: string, interpolations?: Record) {
+export function getPreviewBodyTemplate(
+  configDirPath: string,
+  interpolations?: Record
+) {
   const base = fs.readFileSync(
     path.resolve(__dirname, '../templates/base-preview-body.html'),
     'utf8'
@@ -20,7 +23,10 @@ export function getPreviewBodyHtml(configDirPath: string, interpolations?: Recor
   return interpolate(result, interpolations);
 }
 
-export function getPreviewHeadHtml(configDirPath: string, interpolations?: Record) {
+export function getPreviewHeadTemplate(
+  configDirPath: string,
+  interpolations?: Record
+) {
   const base = fs.readFileSync(
     path.resolve(__dirname, '../templates/base-preview-head.html'),
     'utf8'
@@ -36,7 +42,10 @@ export function getPreviewHeadHtml(configDirPath: string, interpolations?: Recor
   return interpolate(result, interpolations);
 }
 
-export function getManagerHeadHtml(configDirPath: string, interpolations: Record) {
+export function getManagerHeadTemplate(
+  configDirPath: string,
+  interpolations: Record
+) {
   const base = fs.readFileSync(
     path.resolve(__dirname, '../templates/base-manager-head.html'),
     'utf8'
@@ -51,3 +60,11 @@ export function getManagerHeadHtml(configDirPath: string, interpolations: Record
 
   return interpolate(result, interpolations);
 }
+
+export function getManagerMainTemplate() {
+  return require.resolve(`../templates/index.ejs`);
+}
+
+export function getPreviewMainTemplate() {
+  return require.resolve(`../templates/index.ejs`);
+}