Logistics of renaming frame.html to frame/index.html

[itsdouges]

Hey folks 👋

Love your work. Today I used patch-package to patch playroom@0.32.1 for the project I'm working on. For context the deployment infrastructure I'm using only allows index.html files instead of named ones.. which means I had to rename frame.html to frame/index.html.

What's the sentiment in upstreaming this to playroom? Let's talk.

Here is the diff that solved my problem:

diff --git a/node_modules/playroom/lib/makeWebpackConfig.js b/node_modules/playroom/lib/makeWebpackConfig.js
index 6ca8355..2726c60 100644
--- a/node_modules/playroom/lib/makeWebpackConfig.js
+++ b/node_modules/playroom/lib/makeWebpackConfig.js
@@ -169,7 +169,8 @@ module.exports = async (playroomConfig, options) => {
         title: 'Playroom Frame',
         chunksSortMode: 'none',
         chunks: ['frame'],
-        filename: 'frame.html',
+        filename: 'frame/index.html',
+        publicPath: '../',
       }),
       new HtmlWebpackPlugin({
         title: 'Playroom Preview',
diff --git a/node_modules/playroom/src/Playroom/Frames/frameSrc.js b/node_modules/playroom/src/Playroom/Frames/frameSrc.js
index c08b96d..ee55e76 100644
--- a/node_modules/playroom/src/Playroom/Frames/frameSrc.js
+++ b/node_modules/playroom/src/Playroom/Frames/frameSrc.js
@@ -2,7 +2,7 @@
 const frameConfig = require('__PLAYROOM_ALIAS__FRAME_COMPONENT__');

 const defaultFrameSrc = ({ code, themeName }, { baseUrl, paramType }) =>
-  `${baseUrl}frame.html${
+  `${baseUrl}frame/index.html${
     paramType === 'hash' ? '#' : ''
   }?themeName=${encodeURIComponent(themeName)}&code=${encodeURIComponent(
     code

This issue body was partially generated by patch-package.

[itsdouges]

That said then code split chunks don't work — I imagine it's because of passing code from root to frame and it then having assumptions about the level path not being met anymore. 🤔

[itsdouges]

Okay removed the publicPath and added support for both frame.html and frame/index.html

diff --git a/node_modules/playroom/lib/makeWebpackConfig.js b/node_modules/playroom/lib/makeWebpackConfig.js
index 6ca8355..35debf4 100644
--- a/node_modules/playroom/lib/makeWebpackConfig.js
+++ b/node_modules/playroom/lib/makeWebpackConfig.js
@@ -171,6 +171,12 @@ module.exports = async (playroomConfig, options) => {
         chunks: ['frame'],
         filename: 'frame.html',
       }),
+      new HtmlWebpackPlugin({
+        title: 'Playroom Frame',
+        chunksSortMode: 'none',
+        chunks: ['frame'],
+        filename: 'frame/index.html',
+      }),
       new HtmlWebpackPlugin({
         title: 'Playroom Preview',
         chunksSortMode: 'none',

• having our own frameSrc function:

export const frameSrc = (
  { code, themeName }: { code: string; themeName: string },
  { baseUrl, paramType }: { baseUrl: string; paramType: 'hash' | 'search' },
) => {
  const isBifrostEnvironment = baseUrl.includes('assets/');
  const actualBaseUrl = isBifrostEnvironment
    ? baseUrl.replace('assets/', '') + 'frame'
    : baseUrl + 'frame.html';

  return `${actualBaseUrl}${
    paramType === 'hash' ? '#' : ''
  }?themeName=${encodeURIComponent(themeName)}&code=${encodeURIComponent(
    code,
  )}`;
};

I think this will work. Our infra smdh :- )

Might end up closing this TBH because there isn't much to be done. Just going to close this. Either way we're playing around with Playroom atm to help test some things 👋