Content
``` The final result will be ```html Load into the external "div" tag:Content
Content
``` [Run on codepen](https://codepen.io/vimeshjs/pen/ExRpLbb) ### 4. x-shtml A replacement for Alpine.js's `x-html` directive that properly handles component lifecycle in complex scenarios. ## Advanced Usage ### Component API (`$api`) While `x-data` is accessible to all descendant elements, `$api` provides **private** properties and methods for component encapsulation. It prevents naming conflicts and provides better component isolation while still inheriting from `x-data` when needed. #### Predefined Properties and Methods | Properties | Description | | ---------- | -------------------------------------------------------------------------- | | $meta | Get the meta info of current component, including type, namespace, prefix. | | $parent | Get the closest parent component element | | Methods | Description | | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | $of('component type') | Find the $api of specific component type of its ancestors. If the component type is empty, it will return the $api of its closest parent component | | $closest(filter) | Find the closest ancestor component element according to the filter, which could be component type or a function | | $find(filter) | Find all descendant component element according to the filter, which could be component type or a function | | $findOne(filter) | It is similar to $find, but only return the first component element match the filter | #### Lifecycle Hooks | x-data | $api | | ----------- | ----------- | | init() | onMounted() | | destroy() | onUnmounted() | ### Global API (`$vui`) The global `$vui` object provides utilities and configuration options: | Property/Method | Description | | --------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | | $vui.config | A config object of `debug` mode flag and `importMap` | | $vui.\_ | An utility object of some most used functions: `isString`, `isArray`, `isFunction`, `isPlainObject`, `each`, `map`, `filter`, `extend` | | $vui.getComponentMeta(element) | Get component type and namespace from html element | | $vui.isComponent(element) | Return true if an html element is a Vimesh UI component | | $vui.visitComponents(elContainer, callback) | Recursively visit all components inside an html container element with callback | | $vui.findChildComponents(elContainer, filter) | Find all child component inside an html container element with specific filter, which could be component type or a function | | $vui.getParentComponent(element) | Get the parent component of specific html element | | $vui.findClosestComponent(element, filter) | Find the closest ancestor component element according to the filter, which could be component type or a function | | $vui.$api(element) | Get $api of a component element | | $vui.$data(element) | Alias of Alpine.$data(element) | | $vui.setHtml(elContainer, html) | Load html into a container element. And Vimesh UI components in the html will be correctly initialized | | $vui.defer(callback) | Execute callback in next event loop. | | $vui.dom(html) | Load a plain html into dom with Vimesh UI components correctly initialized | | $vui.nextTick(callback) | Alias of Alpine.nextTick(callback) | | $vui.effect(callback) | Alias of Alpine.effect(callback) | | $vui.focus(element, option) | Try to make an html element focused | | $vui.scrollIntoView(element) | Try to scroll an html element into view | ## Examples ### Multi-Page Application (MPA) Check the [MPA example](/examples/mpa) for traditional multi-page setups. ### Single-Page Application (SPA) See the [SPA example](/examples/spa/app.html) for dynamic routing and page management. ## Ecosystem ### Vimesh Headless UI [Vimesh Headless UI](https://github.com/vimeshjs/vimesh-headless) provides production-ready components including: - **Form Controls**: Listbox, Combobox, Switch - **Navigation**: Menu, Tabs - **Overlays**: Dialog, Modal - **And more...** Perfect starting point for building your own UI component library.   ## Configuration Configure Vimesh UI through the global `$vui.config` object: ```javascript $vui.config = { // Default namespace for components (default: "vui") namespace: "myui", // Import map for component loading importMap: { "*": "./components/${component}.html", "ui": "https://cdn.example.com/ui/${component}.html" }, // Auto-import all custom elements (default: false) autoImport: true, // Debug mode (default: false) debug: true }; ``` ## Browser Support Vimesh UI works in all modern browsers that support: - ES6+ features - Custom Elements v1 - Alpine.js v3+ ## Development & Testing Vimesh UI has comprehensive test coverage to ensure reliability and stability. ### Running Tests ```bash # Install dependencies yarn install # Run all tests yarn test # Run tests with coverage report yarn test:coverage # Run tests in watch mode during development yarn test:watch # Run tests in CI mode yarn test:ci ``` ### Test Coverage The project maintains high test coverage across all core functionality: - **163 tests** across 11 test suites - **87% statement coverage** - **78% branch coverage** - **91% function coverage** - **90% line coverage** ### Test Categories - **Core utilities** - Essential helper functions and configuration - **Component system** - x-component directive and custom element creation - **Import system** - x-import directive and remote component loading - **Include system** - x-include directive and HTML fragment inclusion - **Style system** - x-style directive and styling functionality - **Slot system** - Named and default slot handling - **Alpine.js integration** - Core framework integration - **Edge cases** - Error handling and boundary conditions - **Integration scenarios** - Complex multi-component workflows ### Building ```bash # Build all distribution formats yarn build # Clean distribution files yarn clean ``` ## Contributing 1. Fork the repository 2. Create your feature branch (`git checkout -b feature/amazing-feature`) 3. Make your changes 4. Run tests (`yarn test`) 5. Ensure all tests pass and coverage is maintained 6. Build the library (`yarn build`) 7. Commit your changes (`git commit -m 'Add amazing feature'`) 8. Push to the branch (`git push origin feature/amazing-feature`) 9. Open a Pull Request ## License This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. ## Links - **Documentation**: [GitHub Repository](https://github.com/vimeshjs/vimesh-ui) - **Examples**: [Live Examples on CodePen](https://codepen.io/collection/vimesh-ui) - **Vimesh Headless UI**: [Component Library](https://github.com/vimeshjs/vimesh-headless) - **Alpine.js**: [Official Website](https://alpinejs.dev/)