enteleform Comments - Answer Overflow

Topics

enteleform

Explore posts from servers

•Created by enteleform on 6/16/2024 in #support

Broken reactivity @ `vite-plugin-solid` with `{dev:false}`, but works fine with `{dev:true}`.

i did just run into something when trying to implement your Iconify wrapper though. it worked fine when it was in the source code of the Obsidian extension where I'm running into the issue. then I tried moving it to an external module so that I can use it across all of my projects, and the same issue started occurring as with @iconify-icon/solid. that at least narrows it down to something to do with module-sourced components and/or the build process of said modules or the extension itself...

39 replies

•Created by enteleform on 6/16/2024 in #support

Broken reactivity @ `vite-plugin-solid` with `{dev:false}`, but works fine with `{dev:true}`.

could be tough to assemble a 1:1 repro, kinda have like a personal framework of modules that are all contributing a bit to the final output. might take a shot at it when I get a chance.

39 replies

•Created by enteleform on 6/16/2024 in #support

Broken reactivity @ `vite-plugin-solid` with `{dev:false}`, but works fine with `{dev:true}`.

39 replies

•Created by enteleform on 6/16/2024 in #support

Broken reactivity @ `vite-plugin-solid` with `{dev:false}`, but works fine with `{dev:true}`.

yeh I guess I'll include that as a lib wrapper in my app, thanks for your help with the workarounds! kinda bugs me that I couldn't track down the root of the issue though... just ran safe-stringify on my final vite config (it's built dynamically with a few modules I have for Vite, Solid, Obsidian, etc.) and don't see any glaring issues.

39 replies

•Created by enteleform on 6/16/2024 in #support

Broken reactivity @ `vite-plugin-solid` with `{dev:false}`, but works fine with `{dev:true}`.

both of those work 👍

39 replies

•Created by enteleform on 6/16/2024 in #support

Broken reactivity @ `vite-plugin-solid` with `{dev:false}`, but works fine with `{dev:true}`.

39 replies

•Created by enteleform on 6/16/2024 in #support

Broken reactivity @ `vite-plugin-solid` with `{dev:false}`, but works fine with `{dev:true}`.

that does work, although it also results in flashing every time something in the dependency chain updates rather than only when the final value is changed. e.g. on every timer tick.

39 replies

•Created by enteleform on 6/16/2024 in #support

Broken reactivity @ `vite-plugin-solid` with `{dev:false}`, but works fine with `{dev:true}`.

my current dev workflow is to just manually run a full build whenever I'm ready to test some changes, haven't been using a build-watch setup. i ended up finding that {dev:true} resolved the issue either through trial and error or might have seen a recommendation about it while researching the issue. before that, I didn't have that option in my config at all.

39 replies

•Created by enteleform on 6/16/2024 in #support

Broken reactivity @ `vite-plugin-solid` with `{dev:false}`, but works fine with `{dev:true}`.

what do you mean @ can't figure out dev setup? like hot reloading?

39 replies

•Created by enteleform on 6/16/2024 in #support

Broken reactivity @ `vite-plugin-solid` with `{dev:false}`, but works fine with `{dev:true}`.

Also, just learned about the Iconify IntelliSense VS Code plugin from your setup 🔥.

39 replies

•Created by enteleform on 6/16/2024 in #support

Broken reactivity @ `vite-plugin-solid` with `{dev:false}`, but works fine with `{dev:true}`.

39 replies

•Created by enteleform on 6/16/2024 in #support

Broken reactivity @ `vite-plugin-solid` with `{dev:false}`, but works fine with `{dev:true}`.

Thanks for the demo. I just replicated it and can confirm that a barebones extension implementation works as expected. However, running the exact same code in my actual extension does not work. Seems like I might have to debug my Vite config... can't think of what sort of thing might cause that issue off the top of my head though 🤔.

39 replies

•Created by enteleform on 6/16/2024 in #support

Broken reactivity @ `vite-plugin-solid` with `{dev:false}`, but works fine with `{dev:true}`.

It works fine in the StackBlitz example though, so I'm not sure what aspects of [Obsidian, Solid, Vite, Iconify, etc.] are playing into the issue in the actual production environment.

39 replies

•Created by enteleform on 6/16/2024 in #support

Broken reactivity @ `vite-plugin-solid` with `{dev:false}`, but works fine with `{dev:true}`.

I think so, I haven't noticed it anywhere else.

39 replies

•Created by enteleform on 6/16/2024 in #support

Broken reactivity @ `vite-plugin-solid` with `{dev:false}`, but works fine with `{dev:true}`.

Bundled Output

function Icon(props) {
  const icon = () => typeof props.icon === "object" ? JSON.stringify(props.icon) : props.icon;
  return (
    (() => {
      var _el$ = _tmpl$$b();
      spread$1(_el$, mergeProps$1(props, {
        get icon() {
          return icon();
        }
      }), false);
      _el$._$owner = getOwner();
      createRenderEffect$1((_p$) => {
        var _v$ = icon(), _v$2 = props.mode, _v$3 = props.inline, _v$4 = props.rotate, _v$5 = props.flip, _v$6 = props.width, _v$7 = props.height, _v$8 = props.preserveAspectRatio, _v$9 = props.noobserver;
        _v$ !== _p$.e && setAttribute$1(_el$, "icon", _p$.e = _v$);
        _v$2 !== _p$.t && setAttribute$1(_el$, "mode", _p$.t = _v$2);
        _v$3 !== _p$.a && setAttribute$1(_el$, "inline", _p$.a = _v$3);
        _v$4 !== _p$.o && setAttribute$1(_el$, "rotate", _p$.o = _v$4);
        _v$5 !== _p$.i && setAttribute$1(_el$, "flip", _p$.i = _v$5);
        _v$6 !== _p$.n && setAttribute$1(_el$, "width", _p$.n = _v$6);
        _v$7 !== _p$.s && setAttribute$1(_el$, "height", _p$.s = _v$7);
        _v$8 !== _p$.h && setAttribute$1(_el$, "preserveaspectratio", _p$.h = _v$8);
        _v$9 !== _p$.r && setAttribute$1(_el$, "noobserver", _p$.r = _v$9);
        return _p$;
      }, {
        e: void 0,
        t: void 0,
        a: void 0,
        o: void 0,
        i: void 0,
        n: void 0,
        s: void 0,
        h: void 0,
        r: void 0
      });
      return _el$;
    })()
  );
}

function Icon(props) {
  const icon = () => typeof props.icon === "object" ? JSON.stringify(props.icon) : props.icon;
  return (
    (() => {
      var _el$ = _tmpl$$b();
      spread$1(_el$, mergeProps$1(props, {
        get icon() {
          return icon();
        }
      }), false);
      _el$._$owner = getOwner();
      createRenderEffect$1((_p$) => {
        var _v$ = icon(), _v$2 = props.mode, _v$3 = props.inline, _v$4 = props.rotate, _v$5 = props.flip, _v$6 = props.width, _v$7 = props.height, _v$8 = props.preserveAspectRatio, _v$9 = props.noobserver;
        _v$ !== _p$.e && setAttribute$1(_el$, "icon", _p$.e = _v$);
        _v$2 !== _p$.t && setAttribute$1(_el$, "mode", _p$.t = _v$2);
        _v$3 !== _p$.a && setAttribute$1(_el$, "inline", _p$.a = _v$3);
        _v$4 !== _p$.o && setAttribute$1(_el$, "rotate", _p$.o = _v$4);
        _v$5 !== _p$.i && setAttribute$1(_el$, "flip", _p$.i = _v$5);
        _v$6 !== _p$.n && setAttribute$1(_el$, "width", _p$.n = _v$6);
        _v$7 !== _p$.s && setAttribute$1(_el$, "height", _p$.s = _v$7);
        _v$8 !== _p$.h && setAttribute$1(_el$, "preserveaspectratio", _p$.h = _v$8);
        _v$9 !== _p$.r && setAttribute$1(_el$, "noobserver", _p$.r = _v$9);
        return _p$;
      }, {
        e: void 0,
        t: void 0,
        a: void 0,
        o: void 0,
        i: void 0,
        n: void 0,
        s: void 0,
        h: void 0,
        r: void 0
      });
      return _el$;
    })()
  );
}

39 replies

•Created by enteleform on 6/16/2024 in #support

Broken reactivity @ `vite-plugin-solid` with `{dev:false}`, but works fine with `{dev:true}`.

Updated Source Code

export function Icon(props: IconifyIconProps): JSX.Element {
  const icon = () => 
    typeof props.icon === 'object'
      ? JSON.stringify(props.icon)
      : props.icon

  return (
    <iconify-icon
      {...props}
      attr:icon={icon()}
      attr:mode={props.mode}
      attr:inline={props.inline}
      attr:rotate={props.rotate}
      attr:flip={props.flip}
      attr:width={props.width}
      attr:height={props.height}
      attr:preserveAspectRatio={props.preserveAspectRatio}
      attr:noobserver={props.noobserver}
    />
  );
}

export function Icon(props: IconifyIconProps): JSX.Element {
  const icon = () => 
    typeof props.icon === 'object'
      ? JSON.stringify(props.icon)
      : props.icon

  return (
    <iconify-icon
      {...props}
      attr:icon={icon()}
      attr:mode={props.mode}
      attr:inline={props.inline}
      attr:rotate={props.rotate}
      attr:flip={props.flip}
      attr:width={props.width}
      attr:height={props.height}
      attr:preserveAspectRatio={props.preserveAspectRatio}
      attr:noobserver={props.noobserver}
    />
  );
}

39 replies

•Created by enteleform on 6/16/2024 in #support

Broken reactivity @ `vite-plugin-solid` with `{dev:false}`, but works fine with `{dev:true}`.

No luck, got rid of the destructuring and the issue is still occurring.

39 replies

•Created by enteleform on 6/16/2024 in #support

Broken reactivity @ `vite-plugin-solid` with `{dev:false}`, but works fine with `{dev:true}`.

Just forked it, gonna see if changing that resolves the issue. Any idea why it would have the issue in {dev:false} mode but not {dev:true} ?

39 replies

•Created by enteleform on 6/16/2024 in #support

Broken reactivity @ `vite-plugin-solid` with `{dev:false}`, but works fine with `{dev:true}`.

Is this a Solid issue, or an Iconify issue?

39 replies

•Created by enteleform on 6/16/2024 in #support

Broken reactivity @ `vite-plugin-solid` with `{dev:false}`, but works fine with `{dev:true}`.

39 replies