Comparing version 8.0.0 to 8.0.1
@@ -5,2 +5,10 @@ # Changelog | ||
### [8.0.1](https://github.com/hybridsjs/hybrids/compare/v8.0.0...v8.0.1) (2022-05-04) | ||
### Bug Fixes | ||
* **cli:** multiline comments and regexp skip reorder ([08d3412](https://github.com/hybridsjs/hybrids/commit/08d3412b7c187298501df606b00064401e7fbc10)) | ||
* **localize:** remove circural dependncies in files ([3d7353a](https://github.com/hybridsjs/hybrids/commit/3d7353aed52d8c520e1fc4998a5155cc66e5b54d)) | ||
## [8.0.0](https://github.com/hybridsjs/hybrids/compare/v7.1.0...v8.0.0) (2022-04-28) | ||
@@ -7,0 +15,0 @@ |
@@ -24,3 +24,3 @@ # Localization | ||
"Hello ${0}!": { | ||
message: "Witaj #{0}!", | ||
message: "Witaj ${0}!", | ||
}, | ||
@@ -27,0 +27,0 @@ }); |
# Getting Started | ||
## Bundlers | ||
## Installation | ||
Add [npm package](https://www.npmjs.com/package/hybrids) to your application: | ||
If your application uses a bundler (like [Vite](https://vitejs.dev/) or [Snowpack](https://www.snowpack.dev/)), just add the [npm package](https://www.npmjs.com/package/hybrids) to your application: | ||
@@ -11,9 +11,7 @@ ```bash | ||
## Direct Usage | ||
Otherwise, you can use it directly from a number of CDNs, which provides packages from the registry: | ||
You can use the library directly from many CDNs, which provides packages from the NPM: | ||
* [https://esm.sh/hybrids@^8](https://esm.sh/hybrids@^8) (2 requests, minified) | ||
* [https://cdn.skypack.dev/hybrids@^8?min](https://cdn.skypack.dev/hybrids@^8?min) (2 request, minified) | ||
* [https://unpkg.com/hybrids@^8](https://unpkg.com/hybrids@^8) (multiple request, not minified) | ||
* [https://unpkg.com/hybrids@^8](https://unpkg.com/hybrids@^8) (multiple requests, not minified) | ||
@@ -27,3 +25,3 @@ ```html | ||
## Hot Module Replacement | ||
### Hot Module Replacement | ||
@@ -30,0 +28,0 @@ HMR works out of the box, but your bundler setup may require indication that an entry point can be replaced on the fly. For example, for bundlers using ES module syntax, you can use the following code: |
@@ -13,9 +13,7 @@ <center> | ||
The main goal of the library is to provide a complete set of tools for building UI components, managing complex data sources, creating app flows with the client-side structural routing, and localizing it for the worldwide markets. Everything without external dependencies. | ||
The main goal of the framework is to provide a complete set of tools for the web platform - everything without external dependencies. It supports building UI components, managing complex states, creating app flows with client-side routing, and localizing its content for the worldwide markets. All of the parts follow the same unique concepts making it easy to understand and use! | ||
All of the parts of the library follow the same unique concepts making it easy to understand and use. | ||
## Quick Look | ||
### The Simplest Component Structure | ||
### The Simplest Structure | ||
@@ -54,3 +52,3 @@ The component model is based on plain objects and pure functions*, still using the [Web Components API](https://developer.mozilla.org/en-US/docs/Web/Web_Components) under the hood: | ||
The library has built-in support for automatic translation of the component's content. Additionally, the library provides a simple way to add dynamic messages with plural forms, HTML content, and finally handy CLI tool to extract messages from the source code. | ||
Built-in support for automatic translation of the component's content makes translation seamless and easy to integrate. Additionally, the framework provides a way to add dynamic messages with plural forms, HTML content, or use messages outside of the template context. Also, it comes with handy CLI tool to extract messages from the source code! | ||
@@ -70,3 +68,3 @@ ```javascript | ||
"Hello ${0}!": { | ||
message: "Witaj #{0}!", | ||
message: "Witaj ${0}!", | ||
}, | ||
@@ -76,6 +74,4 @@ }); | ||
To translate the component content, you just need to provide the correct message, but the component structure is not changed. | ||
You can read more in the [Localization](https://hybrids.js.org/#/component-model/localization.md) section of the documentation. | ||
You can read more in the [Localization](/component-model/localization.md) section. | ||
### Complex State Management | ||
@@ -82,0 +78,0 @@ |
{ | ||
"name": "hybrids", | ||
"version": "8.0.0", | ||
"version": "8.0.1", | ||
"description": "A JavaScript framework for creating fully-featured web applications, components libraries, and single web components with unique declarative and functional architecture", | ||
@@ -5,0 +5,0 @@ "type": "module", |
@@ -14,9 +14,7 @@ | ||
The main goal of the library is to provide a complete set of tools for building UI components, managing complex data sources, creating app flows with the client-side structural routing, and localizing it for the worldwide markets. Everything without external dependencies. | ||
The main goal of the framework is to provide a complete set of tools for the web platform - everything without external dependencies. It supports building UI components, managing complex states, creating app flows with client-side routing, and localizing its content for the worldwide markets. All of the parts follow the same unique concepts making it easy to understand and use! | ||
All of the parts of the library follow the same unique concepts making it easy to understand and use. | ||
## Quick Look | ||
### The Simplest Component Structure | ||
### The Simplest Structure | ||
@@ -55,3 +53,3 @@ The component model is based on plain objects and pure functions*, still using the [Web Components API](https://developer.mozilla.org/en-US/docs/Web/Web_Components) under the hood: | ||
The library has built-in support for automatic translation of the component's content. Additionally, the library provides a simple way to add dynamic messages with plural forms, HTML content, and finally handy CLI tool to extract messages from the source code. | ||
Built-in support for automatic translation of the component's content makes translation seamless and easy to integrate. Additionally, the framework provides a way to add dynamic messages with plural forms, HTML content, or use messages outside of the template context. Also, it comes with handy CLI tool to extract messages from the source code! | ||
@@ -71,3 +69,3 @@ ```javascript | ||
"Hello ${0}!": { | ||
message: "Witaj #{0}!", | ||
message: "Witaj ${0}!", | ||
}, | ||
@@ -77,4 +75,2 @@ }); | ||
To translate the component content, you just need to provide the correct message, but the component structure is not changed. | ||
You can read more in the [Localization](https://hybrids.js.org/#/component-model/localization.md) section of the documentation. | ||
@@ -81,0 +77,0 @@ |
@@ -21,2 +21,4 @@ import sax from "./sax.js"; | ||
} | ||
return i + end.length; | ||
} | ||
@@ -31,4 +33,2 @@ | ||
i = moveIndex(content, i, '"', '"', true); | ||
// regexp | ||
i = moveIndex(content, i, "/", "/", true); | ||
@@ -39,2 +39,5 @@ // comments | ||
// regexp | ||
i = moveIndex(content, i, "/", "/", true); | ||
return i; | ||
@@ -41,0 +44,0 @@ } |
@@ -1,2 +0,3 @@ | ||
import { compileTemplate, getPlaceholder } from "./template/core.js"; | ||
import { compileTemplate } from "./template/core.js"; | ||
import { getPlaceholder } from "./template/utils.js"; | ||
@@ -3,0 +4,0 @@ import global from "./global.js"; |
@@ -5,3 +5,3 @@ import global from "../global.js"; | ||
import { dataMap, removeTemplate } from "./utils.js"; | ||
import { dataMap, removeTemplate, getPlaceholder } from "./utils.js"; | ||
@@ -11,6 +11,2 @@ import resolveValue from "./resolvers/value.js"; | ||
const TIMESTAMP = Date.now(); | ||
export const getPlaceholder = (id = 0) => `H-${TIMESTAMP}-${id}`; | ||
const PLACEHOLDER_REGEXP_TEXT = getPlaceholder("(\\d+)"); | ||
@@ -17,0 +13,0 @@ const PLACEHOLDER_REGEXP_EQUAL = new RegExp(`^${PLACEHOLDER_REGEXP_TEXT}$`); |
@@ -1,2 +0,3 @@ | ||
import { compileTemplate, getPlaceholder } from "./core.js"; | ||
import { compileTemplate } from "./core.js"; | ||
import { getPlaceholder } from "./utils.js"; | ||
import * as helpers from "./helpers.js"; | ||
@@ -3,0 +4,0 @@ |
@@ -55,1 +55,4 @@ import global from "../global.js"; | ||
} | ||
const TIMESTAMP = Date.now(); | ||
export const getPlaceholder = (id = 0) => `H-${TIMESTAMP}-${id}`; |
411672
6213
150