Tim Basel Posts - Answer Overflow

Tim Basel

•Created by Tim Basel on 6/16/2024 in #support

`vite-plugin-solid` ignores/removes `/** @jsxImportSource ... */` pragma comment

I'm trying to use a custom JSX runtime for a single file using the @jsxImportSource pragma comment. Unfortunately it seems like that the vite-plugin-solid or maybe the babel-plugin-jsx-dom-expressions it uses replaces/ignores/removes these pragmas, so that all JSX functions in the compiled output always call template function from solid-js. If I remove the solid plugin from the vite.config.js file, the custom JSX runtime works correctly, but then I don't know how to get Solid to render correctly. For reference, here is part of the file where I want to treat the JSX as raw XML and render it using the xml-jsx-runtime package.

/** @jsxRuntime automatic */
/** @jsxImportSource xml-jsx-runtime/runtime */

export const XML = () => {
  return (
    <office:document-meta
      xmlns:meta="urn:oasis:names:tc:opendocument:xmlns:meta:1.0"
      office:version="1.3"
    >
      <office:meta>
        <meta:creation-date>2024-06-02T23:54:02.394823826</meta:creation-date>
      </office:meta>
    </office:document-meta>
  );
};

/** @jsxRuntime automatic */
/** @jsxImportSource xml-jsx-runtime/runtime */

export const XML = () => {
  return (
    <office:document-meta
      xmlns:meta="urn:oasis:names:tc:opendocument:xmlns:meta:1.0"
      office:version="1.3"
    >
      <office:meta>
        <meta:creation-date>2024-06-02T23:54:02.394823826</meta:creation-date>
      </office:meta>
    </office:document-meta>
  );
};

Is there anything I can do to have the vite-plugin-solid not override the custom import? Or is there a different way to achieve the goal in Solid? (this way seems to be supported by esbuild, typescript and the @babel/plugin-transform-react-jsx package)

2 replies

SSolidJS

•Created by Tim Basel on 4/12/2023 in #support

Partial Setter for a Store

Is there a way to get a setter function for a nested object inside a store? This is a minimal example of the problem I like to solve. The getter proxy works, but I can't figure out how to get a SetStoreFunction or something else (the props the PersonForm can be changed if needed) that modifies a field inside the store.

const [store, setStore] = createStore({ 
  person: { 
    name: 'John', 
    age: 30 
  }, 
  note: 'foo',
})

return <div>
  <PersonForm person={store.person} setPerson={...} />
</div>

const [store, setStore] = createStore({ 
  person: { 
    name: 'John', 
    age: 30 
  }, 
  note: 'foo',
})

return <div>
  <PersonForm person={store.person} setPerson={...} />
</div>

3 replies

Gaming

Programming