Fast learning, preprocessing, intuitive web framework
npm install rinojs
Fast learning, preprocessing, intuitive web framework.
`
Rino.js is created to fix the complexity matters of web framework.
▶️ Installation
The recommended way to start your Rino project:
`
npm create rino@latest
`
For manual setup:
`
npm i rinojs
`
📢 Notice
$3
Rino.js is going to be version 3.0.0 after some of new features and bugs are sorted.
I know my versioning style is not that great.
But I want Rino.js version 3 to be more completed than beginning of version 2.
$3
#### 1. Deprecation of @
Now from version 2.19.0 we need to rino- instead of @ for attributes.
`
`
#### 2. Added escape to i18n system.
Input:
`
\head.title\
head.title
missing.value
`
Output:
`
head.title
Translated Title Here
missing.value
`
$3
Now i18n pages are going to be included in project sitemap generation.
$3
Rino.js now has a fully-featured, flexible, and developer-friendly JSON-based internationalization system for both dev server and static generation.
Localization is now deeply integrated into the compiler pipeline while staying simple and intuitive to use.
#### Example structure:
`
pages/
index.html
about.html
i18n/
en/
index.json
about.json
ko/
index.json
about.json
`
Each tag in your HTML will map to a key inside the corresponding JSON file:
#### index.html:
`
header.title
body.content.top[0]
`
#### i18n/en/index.json:
`
{
"header": { "title": "Welcome" },
"body": {
"content": { "top": ["First content block"] }
}
}
`
#### rino-config:
You can explicitly define which locales should be built and served.
Only "en" and "ko" directories under /i18n/ are used.
All other locale folders are ignored (safe, predictable output).
defaultLocale is applied to root pages (e.g. /index.html).
Localized pages will be generated under /dist/ automatically.
`
i18n: {
defaultLocale: "en",
locales: ["en", "ko"]
}
`
#### Other things to note for i18n feature:
- Supports nested objects
- Supports array indexing (e.g. items[0].label)
- Missing keys gracefully fallback to default locale if configured
$3
New version, better development experience and totally different from version 1.
Many syntax is simplified and following html, css and javascript standard. And many things are updated for automation.
Development Build System is changed to the server side rendering with memory data management with individual IO update on change. I call this, build on request. This is so much faster than version 1.
#### Example of Rino 2
- ./pages/index.html
`
@tag="button"
type="button"
onclick="alert('Hello world!')"
/>
`
🕵️ Test
$3
Right now end to end testing is implemented for test backoffice website with cypresss and playright.
Both can be used to test backoffice website by:
#### Cypress:
`
npm run test-cp
`
Which is npx cypress open
#### Playwright
`
npm run test-pw
`
Which is npx playwright test
$3
I am thinking of using jest`.