[QUESTION] Glob patterns for importMap

go4cas commented 1 year ago

How would one structure components in sub-directories?

Example:

project
+---components
|   |   header.html
|   |   footer.html
|   |
|   +---core
|   |   |   list-box.html
|   |   |   tag.html
|   |   |   ...
|   |
|   |
|   +---customer
|       |   customer-list.html
|       |   customer-edit.html
|       |   ...

I have tried using glob patterns, but not working:

$vui.config.importMap = {
  '*': './components/**/${component}.html',
}

Is there another way?

xinjie-zhang commented 1 year ago

Good question ! I've added a complete example(page-blog, page-welcome) in /examples.

The full syntax of x-import is x-import="{namespace1}:{path1}{component1.1},{component1.2};{namespace2}:{path2}{component2.1},{component2.2};..."

Let's say we have simple blog website. All pages are under namespace "page". Other components use the default namespace "vui". Page components are in /components/pages/*.html. Other components are in /components/*/*.html

Now we create the first home page

/examples/page-welcome.html
<head>
<title>Welcome</title>

<script src="https://unpkg.com/@vimesh/ui"></script>
<script src="https://unpkg.com/alpinejs" defer></script>

<script>
    $vui.config.importMap = {
        "*": './components/${path}${component}.html',
        "page": './components/pages/${component}.html'
    }
</script>
<style>
    [x-cloak] {
        display: none !important;
    }
</style>

Blog page `/examples/page-blog.html` is similar. Now we create a relatively complex component `/components/cms/article.html`. It uses another two components `/components/core/datepicker.html` and `/components/core/combobox.html`
> /components/cms/article.html
```html
<template x-component="article" x-import="core/combobox,datepicker">
    <div>
        <h3 x-text="$prop('title')"></h3>
        <slot></slot>
    </div>
    <div>
        <vui-combobox></vui-combobox>
        <vui-datepicker></vui-datepicker>
    </div>
</template>

Since vimesh ui is cdn friendly, you could just open https://unpkg.com/@vimesh/ui/examples/page-welcome.html . Try to navigate between home page and blog page.

xinjie-zhang commented 1 year ago

I have added examples for multi page app(/examples/mpa) and single page app(/example/spa). In spa example, there is a simple router-viewer implementation.

vimeshjs / vimesh-ui

[QUESTION] Glob patterns for importMap #2