Qwik application directory structure

[midnight basin]

Can someone point me to the recommended structure for qwik that include libraries?
I have the following structure, but I am wondering if it is optimized. I am wondering if I have to add another toplevel qwik application where whould I put it.

Libraries are the directories starting with @, while the main application is the com.ehrjm folder.

So, could the libaries exist outside the main app folder since libraries are appllication themselves less router?

[slim sluice]

https://github.com/kunai-consulting/qwik-design-system/tree/v2-migration/libs/components

here's a library example

And it's in a monorepo with a docs site / application

[midnight basin]

@slim sluice There doesn't seem to be a doc site - the link https://qwik.design/contributing/intro/#roadmap takes to a page with nothing. Is there an alternate page that you saw?

[slim sluice]

There is a top level docs folder. Also the site just isn't deployed due to ongoing compliance concerns at work

[midnight basin]

@slim sluice To get started:

1. How do I create the monorepo - if I know what package you are using for this, then the proceeding two I could do from the instructions.
2. How do I create an app for the monorep
3. How do I create a library for the monorep

[slim sluice]

What I did is I used pnpm workspaces, then I created an empty app and an empty library from the qwik cli. I removed out the existing dependencies I didn't like. For example, eslint, etc.

What I linked above is more future facing for vite 8 with the rolldown config / vite libraries

https://pnpm.io/workspaces

[midnight basin]

I will check it out. In your repo, I don't see at Text widget as yet. Does it go by another name?

[slim sluice]

It is a headless library, i take it a text widget would just be static text?

[midnight basin]

It goes by different name. An example is shown in the link - https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/TextBox/Overview/

[slim sluice]

Ah the Field component is similar

You can see how it's used in the field browser tests

[midnight basin]

👍 Are the finished component ready for primetime?

[slim sluice]

I would consider them early access since the entire lib is v2 but a lot of the components are likely production ready yes. If you run into bugs just lmk

And worse case scenario you can copy the code if I don't have time to get to it

Just be aware that docs are WIP so you may have to ask me some questions

[midnight basin]

Thanks

[midnight basin]

@slim sluice I have the following Field embeded in a component

  <div style={{ padding: '0.75rem' }}>
    <Field.Root
      disabled={disabled}
      name={name}
      onChange$={onChange$}
      readOnly={readOnly}
      required={required}
      value={value}
    >
      <Field.Label>{label}</Field.Label>
      <Field.Input placeholder={placeholder} type="text" />
      {description ? (
        <Field.Description>{description}</Field.Description>
      ) : null}
      {error ? <Field.Error>{error}</Field.Error> : null}
    </Field.Root>
  </div>

However, nothing is displayed in the browser and no error is displayed in the console. Maybe I am thinking that a provider similar to QwikProvider is missing in the root.tsx file. However due to absence of docs I cannot verify same.

[slim sluice]

No this is an annoying vite issue in v2. You have to ssr.noExternal either @qds.dev/ui or qwik.dev/core i forget

cc @twin plover

[twin plover]

@midnight basin you're using latest beta and there's no error when you click around in dev?

[midnight basin]

"@builder.io/qwik": "^1.17.2",
"@builder.io/qwik-city": "^1.17.2"
"@qds.dev/ui": "^0.6.2",

No suggestions that anything is off.

[slim sluice]

Ah well those versions would also be an issue @qds.dev/ui is a v2+ library