vimesh-ui [QUESTION] Glob patterns for importMap

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?

Dec 13 '22 14:12 go4cas

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>
</head>

<body x-cloak x-import="header,footer;page:welcome">
    <vui-header></vui-header>
    <page-welcome></page-welcome>
    <vui-footer></vui-footer>
</body>

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

<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.

Dec 13 '22 15:12 xinjie-zhang

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.

Dec 16 '22 03:12 xinjie-zhang

vimesh-ui vimesh-ui copied to clipboard

[QUESTION] Glob patterns for importMap

vimesh-ui
vimesh-ui copied to clipboard