#switch for not using server$ in different environment

18 messages · Page 1 of 1 (latest)

worthy plaza
#

hey guys, i'm using storybook for creating my components. now i've build an icon component that uses server$ to read svg icons from a directory.

in storybook this is not working so i've mocked the fs package to simulate this.

I've tried to implemented a switch to detect if i should use server$

this don't work:

const wrappedReadIconFile =
  process.env.STORYBOOK !== "true" ? readIconFile : server$(readIconFile);

//process.env.STORYBOOK is set by storybook config
//if i debug the condition it's good as well

this works, if i uncomment one of each lines:
const wrappedReadIconFile = server$(readIconFile);
// const wrappedReadIconFile = readIconFile;

I'm not sure what qwik is doing under the hood. but it seems that qwik is processing the code and detect this not correct.

has someone an idea what else i can do?

One idea was to mock server$ for storybook, but i had no success with that.

here is the full component code:
https://stackblitz.com/edit/vitejs-vite-nzbcfx?file=src%2Fcomponents%2Ficon%2Ftypes.ts,src%2Fcomponents%2Ficon%2Ficon.tsx,src%2Fcomponents%2Ficon%2Fsvgs%2Foutlined_400_0_24px%2Fthumb_up_24px.svg,src%2Fcomponents%2Ficon%2Fsvgs%2Foutlined_400_0_24px%2Fthumb_down_24px.svg,src%2Froutes%2Findex.tsx&terminal=dev

StackBlitz
Vitejs - Vite (forked) - StackBlitz

Next generation frontend tooling. It's fast!

vivid acorn
#

it would be better to use import globbing and the ?jsx query to pre-convert all svg to js and so not needing server$

slow wagon
#

-# Note: Wrapping code blocks with tripple backticks makes them much easier to read

worthy plaza
worthy plaza
vivid acorn
worthy plaza
#

i wanted to embed the svg's to reduce server requests and deliver instant for best pagespeed results

vivid acorn
#

oh and you'll have a component that lists 3000 names and imports, so that's not great either

#

ok maybe server$ isn't a terrible approach

#

what you can do is add a define in your vite config that is true when it's a storybook build. Then there will be no runtime check and server$ won't be in the code

slow wagon
vivid acorn
slow wagon
#

Ah

worthy plaza
# vivid acorn what you can do is add a `define` in your vite config that is true when it's a s...

can you explain what you're meaning?

This is my config right now. I've mocked fs. That it works in browser with storybook. I had added an env var that i'm using storybook.

import path from "path";
import { StorybookConfig } from "storybook-framework-qwik";

const config: StorybookConfig = {
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  framework: {
    name: "storybook-framework-qwik",
  },
  core: {
    renderer: "storybook-framework-qwik",
  },
  stories: [
    // ...rootMain.stories,
    "../src/components/**/*.stories.mdx",
    "../src/components/**/*.stories.@(js|jsx|ts|tsx)",
  ],

  viteFinal: async (config) => {
    // Merge custom configuration into the default config
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve?.alias,
          fs: path.resolve(__dirname, "./mock-fs.ts"),
          path: "path-browserify",
        },
      },
      define: {
        ...config.define,
        "process.env.STORYBOOK": "true",
      },
    };
  },
};

export default config;

my idea was to add a check on line 23 for this.

https://stackblitz.com/edit/vitejs-vite-nzbcfx?file=src%2Fcomponents%2Ficon%2Ficon.tsx%3AL23

but i don't know why it doesn't work.

StackBlitz
invisible1988
Vitejs - Vite (forked) - StackBlitz

Next generation frontend tooling. It's fast!

vivid acorn
#

Ah you're using define already, good. However it will only happen after the optimizer sees the server$

Try putting the server$ in a function in a separate .ts file and import it. Then the server$ stuff happens separately.

worthy plaza
#

or did I have something missunderstand?