madmaniak
/
pro-router-imba2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

writing documentation in progress

master
Marek Piasecki 2 years ago
parent
3452fa6cc5
commit
bcc2d10e56
8 changed files with 232 additions and 110 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/index.js
  2. 137
      src/main.imba
  3. 3
      src/router.imba
  4. 6
      src/router_tag.imba
  5. 1
      src/views.json
  6. 18
      src/views/home.imba
  7. 30
      src/views/installation.imba
  8. 144
      src/views/usage.imba

1
src/index.js
View File

@ -1,3 +1,2 @@
import './router.imba' import './router.imba'
import './main.imba' import './main.imba'
R.url_changed() // the best if you move it right before imba.mount

137
src/main.imba
View File

@ -1,13 +1,16 @@
css global css
html, body m:0 p:0 html, body m:0 p:0
body ff:mono bgc:gray9 body ff:mono bgc:gray9
a c:violet6 td:none td@hover:underline a c:violet6 td:none td@hover:underline
.active, .activated filter:brightness(130%) .active filter:brightness(130%)
.activated bgc:violet3
.disabled, .disabled@hover filter:grayscale(100%)
.zoomed scale:1.05
.button d:inline-block m:2px bgc:none c:violet7 td:none bxs:sm us:none .button d:inline-block m:2px bgc:none c:violet7 td:none bxs:sm us:none
.button@hover, .button.active bxs:md filter:hue-rotate(5deg) ml:0px pl:12px td:none .button@hover, .button.active bxs:md filter:hue-rotate(5deg) mb:0px pt:12px td:none
.button, code, .bordered p:10px bd:2px solid violet5 rd:10px d:inline-block .button, code, .bordered p:10px bd:2px solid violet5 rd:10px d:inline-block
.bordered p:2.5px bw:1.5px c:violet9 .bordered p:2.5px bw:1.5px c:violet9
.night filter:invert(100%) .night filter:invert(20%)
.gradient .gradient
bg:linear-gradient(to right,violet7,blue6,violet7) bg:linear-gradient(to right,violet7,blue6,violet7)
fw:normal fw:normal
@ -19,12 +22,12 @@ tag App
d:bbox mx:auto my:50px bgc:white p:40px rd:5px maw:1024px of:auto d:bbox mx:auto my:50px bgc:white p:40px rd:5px maw:1024px of:auto
@lt-xs m:0 px:0 rd:0 @lt-xs m:0 px:0 rd:0
<self.night=R.param('night')> <self.night=R.param('night') .zoomed=R.param('zoomed')>
<param-preview> <param-preview>
<h2.gradient> "pro-router-imba2: Imba2 integration with pro-router" <h2.gradient> "pro-router-imba2: Imba2 integration with pro-router"
<[d:flex flw:wrap w:100% jc:space-between]> <[d:flex flw:wrap w:100% jc:space-between]>
<Menu> <app-menu>
<pro-router[mx:40px maw:750px]> <pro-router[mx:40px]>
### ###
<pro-ref view="b" params={ project: 2}> "b/project/2" <pro-ref view="b" params={ project: 2}> "b/project/2"
<pro-ref-f view="c" params={ book: 3}> "c/book/3" <pro-ref-f view="c" params={ book: 3}> "c/book/3"
@ -32,104 +35,26 @@ tag App
<input$v type='text' value=R.param('e') @keyup=R.write('e', $v.value)> <input$v type='text' value=R.param('e') @keyup=R.write('e', $v.value)>
### ###
tag Menu tag app-menu
<self[d:flex fld:column mx:auto mb: 50px]> <self[d:flex fld:row flw@lt-xs:wrap mx:auto mb: 50px jc:center]>
<pro-ref.button view=v> v.toUpperCase! for v in R.views <pro-ref.button view=v> v.toUpperCase! for v in R.views
###
<pro-ref.button view="foo"> 'WRONG WAY!'
<pro-toggle.button param="night">
<label> "NIGHT"
<input type='checkbox' checked=R.param('night')>
###
tag param-preview tag param-preview
<self> "{R.view}: {JSON.stringify(R.params).replace(/"/g, ' ')}" <self> "{R.view}: {JSON.stringify(R.params).replace(/"/g, ' ')}"
extend tag view-home
<self>
"What is "
<b> "pro-router"
" you can see here: "
<a href="http://router.maniak.pro"> "router.maniak.pro"
<br>
"What is "
<a href="https://imba.io"> "imba"
" you surely know."
<br>
"This package integrates both."
<br>
<br>
"Go to your project directory and run:"
<br>
<br>
<code> "npm install pro-router-imba2 --save"
tag view-installation
<self>
"For your convenience package provides "
<b> "vite plugin"
" and installation command"
"."
<br>
"Vite plugin will automatically define views for the router. Thanks to pro-router paradigm you will not write route definitions at all."
<br>
<br>
"1. Create imba project (or go to directory of an existing one):"
<br>
<pre><code>
"""
npx imba create my-app
cd my-app
npm install
"""
<br>
"2. Install pro-router-imba2 and run development server:"
<pre><code>
"""
npm install pro-router-imba2 --save
npx pro-router init
npm run dev
"""
<br>
"3. Add "
<.bordered> "<pro-router>"
" component to your app (in "
<.bordered> "src/main.imba"
" file)."
<br>
"The simplest application would look like this:"
<imba-code file='src/main.imba'>
"""
imba{<c-op> '.'}mount {<c-tag> 'pro-router'}
"""
<br>
"A bit more complex example:"
<imba-code>
"""
{<c-tag-def> 'my-app'}
{<c-tag> 'self'}
{<c-tag> "pro-ref{<c-el> ' view'}{<c-op> '='}{<c-el> 'v'}"} {<c-op> 'for'} v {<c-op> 'in'} {<c-c> 'R'}{<c-op> '.'}views {<c-com> 'render menu'}
{<c-tag> "pro-router"} {<c-com> 'slot for current view'}
{<c-tag-def> 'view-home'}
{<c-tag> 'self'} 'Hello World!'
{<c-tag-def> 'view-another-view'}
{<c-tag> 'self'} 'This is another view.'
imba{<c-op> '.'}mount {<c-tag> 'my-app'}
"""
<br>
"4. Everything is already set."
tag imba-code < pre tag imba-code < pre
prop file prop file
css bgc:gray8 d:block prop url
code bd:0 rd:0 css
&.file bgc:amber3 d:block code d:block bd:0 rd:0 bgc:gray8
&.file bgc:amber3
&.content c:gray3 &.content c:gray3
<self> &.url bgc:gray3
.url bgc:white c:gray7 rd:full p:4px
<self[bgc:gray1 bd:1.1px solid gray3 fs:larger]>
<code.file> file if file <code.file> file if file
<code.url><.url> url if url
<slot name='live'>
<code.content><slot> <code.content><slot>
tag c-el tag c-el
@ -143,12 +68,10 @@ tag c-com < c-el
<self> <self>
"# " "# "
<slot> <slot>
### tag c-str < c-el
tag c-class < c-el <self> "'{<[c:amber6 d:inline]><slot>}'"
<self[c:amber4]> global css .c-br c:amber4 d:inline
<c-dot>
<slot>
###
tag c-tag < c-el tag c-tag < c-el
<self[c:white]> <self[c:white]>
"<" "<"
@ -160,8 +83,14 @@ tag c-tag-def < c-el
"tag " "tag "
<[c:green5 d:inline]><slot> <[c:green5 d:inline]><slot>
tag view-usage tag pro-tip
<self> "List of components" <self[bgc:gray0 p:15px]>
<[c:violet7 fw:bold txs:amber4 bdb:1.5px solid violet4]> "PRO TIP: "
<slot>
import './views/home.imba'
import './views/installation.imba'
import './views/usage.imba'
tag view-examples tag view-examples
<self> "Examples:" <self> "Examples:"

3
src/router.imba
View File

@ -1,8 +1,9 @@
import "pro-router/standalone" # standalone operates on "/#/" hash style url; for regular "/" url use: "pro-router/router" import "pro-router/standalone" # standalone operates on "/#/" hash style url; for regular "/" url use: "pro-router/router"
import "./router_tag.imba" import "./router_tag.imba"
import views from "./views.json"
import { helpers } from "./helpers.imba" import { helpers } from "./helpers.imba"
R.init helpers: helpers, root: 'home', render: imba.commit R.init helpers: helpers, views: views, root: 'home', render: imba.commit
tag view-home tag view-home
<self><h1> 'Imba2 on Pro Router is working...' <self><h1> 'Imba2 on Pro Router is working...'

6
src/router_tag.imba
View File

@ -13,7 +13,7 @@ tag pro-toggle
tag pro-ref-f < a # f - forget current params in new destination tag pro-ref-f < a # f - forget current params in new destination
prop view prop view
prop params = {} prop params
prop go prop go
def render def render
@ -25,6 +25,6 @@ tag pro-ref-f < a # f - forget current params in new destination
tag pro-ref < pro-ref-f tag pro-ref < pro-ref-f
get url get url
#params = JSON.parse JSON.stringify(params) # duplicate object #params = params ? JSON.parse JSON.stringify(params) : {} # duplicate object
#params[k] ||= v for own k, v of R.safe_params #params[k] ??= v for own k, v of R.safe_params
R.to_path view, #params R.to_path view, #params

1
src/views.json
View File

@ -0,0 +1 @@
["home","examples","why-to-use-it","installation","usage"]

18
src/views/home.imba
View File

@ -0,0 +1,18 @@
extend tag view-home
<self>
"What is "
<b> "pro-router"
" you can see here: "
<a href="http://router.maniak.pro"> "router.maniak.pro"
<br>
"What is "
<a href="https://imba.io"> "imba"
" you surely know."
<br>
"This package integrates both."
<br>
<br>
"Go to your project directory and run:"
<br>
<br>
<code> "npm install pro-router-imba2 --save"

30
src/views/installation.imba
View File

@ -0,0 +1,30 @@
tag view-installation
<self>
"For your convenience package provides "
<b> "vite plugin"
" and installation command"
"."
<br>
"Vite plugin will automatically define views for the router. Thanks to pro-router paradigm you will not write route definitions at all."
<br>
<br>
"1. Create imba project (or go to directory of an existing one):"
<br>
<pre><code>
"""
npx imba create my-app
cd my-app
npm install
"""
<br>
"2. Install pro-router-imba2 and run development server:"
<pre><code>
"""
npm install pro-router-imba2 --save
npx pro-router init
npm run dev
"""
<br>
"3. "
<b> "There is no three. "
"Everything is already set."

144
src/views/usage.imba
View File

@ -0,0 +1,144 @@
tag view-usage
<self>
"This integration provides "
<b> 3
" components:"
<br>
<br>
<.bordered> "<pro-ref>"
" generates a link with a proper address hooked to the router."
<br>
<br>
<b> "Examples:"
<br>
<imba-code url="/tips/about/usage/_local_value/1">
<c-el>
<c-tag> "pro-ref{<c-el> " go{<c-op> '='}{<c-str> '/exact/url'}"}"
" "
<c-com> "<a href=\"/exact/url\">"
<br>
<br>
<c-el>
<c-tag> "pro-ref{<c-el> " view{<c-op> '='}{<c-str> 'docs'}"}"
" "
<c-com> "<a href=\"/docs/about/usage\">"
<br>
<c-el>
<c-tag> "pro-ref-f{<c-el> " view{<c-op> '='}{<c-str> 'docs'}"}"
" "
<c-com> "<a href=\"/docs\">"
<br>
<br>
<c-el>
<c-tag> "pro-ref{<c-el> " view{<c-op> '='}{<c-str> 'docs'} params{<c-op> '='}{<.c-br> '{'} chapter{<c-op> ':'} {<c-c> 1}{<.c-br> '}'}"}"
" "
<c-com> "<a href=\"/docs/about/usage/chapter/1\">"
<br>
<c-el>
<c-tag> "pro-ref-f{<c-el> " view{<c-op> '='}{<c-str> 'docs'} params{<c-op> '='}{<.c-br> '{'} chapter{<c-op> ':'} {<c-c> 1}{<.c-br> '}'}"}"
" "
<c-com> "<a href=\"/docs/chapter/1\">"
<br>
<br>
<c-el>
<c-tag> "pro-ref{<c-el> " params{<c-op> '='}{<.c-br> '{'} chapter{<c-op> ':'} {<c-c> 1}{<.c-br> '}'}"}"
" "
<c-com> "<a href=\"/tips/about/usage/chapter/1\">"
<br>
<c-el>
<c-tag> "pro-ref-f{<c-el> " params{<c-op> '='}{<.c-br> '{'} chapter{<c-op> ':'} {<c-c> 1}{<.c-br> '}'}"}"
" "
<c-com> "<a href=\"/tips/chapter/1\">"
<br>
<br>
<c-com> "For external links use <a href=> directly:"
<br>
<c-tag> "a {<c-el> "href"}{<c-op> '='}{<c-str> 'https://example.com/link'}"
<br>
"As you can see you pass existing params further or forget them using "
<.bordered> "<pro-ref-f>"
"."
<br>
<pro-tip>
"Notice "
<b> "_local_value"
" in url."
<br>
"Pro-router treats underscore prefixed values as local and never pass it further."
<br>
<br>
<.bordered> "<pro-toggle>"
" generates switch on/off element writing to url flag with a given name."
<br>
<br>
<b> "Live examples:"
<imba-code url=R.to_path!>
<c-tag> "pro-toggle{<c-el> " param{<c-op> '='}{<c-str> 'zoomed'}"}"
" {<c-str> "Zoom in/out"}"
<br>
<c-tag> "pro-toggle{<c-el> " param{<c-op> '='}{<c-str> 'night'}"}"
" {<c-str> "Good night"}"
<br>
<c-tag> "pro-toggle{<c-el> " param{<c-op> '='}{<c-str> 'night'} disabled{<c-op> '='}{<c-c> true}"}"
" {<c-str> "Switch disabled"}"
<div[d:hcc jc:space-around my:20px us:none h:20px] slot='live'>
<pro-toggle.button param='zoomed'> 'Zoom in/out'
<pro-toggle.button param='night'> 'Good night'
<pro-toggle.button param='night' disabled=true> 'Switch disabled'
<br>
<br>
<.bordered> "<pro-router>"
" displays current view."
<br>
<br>
"The simplest application would look like this:"
<imba-code file='src/main.imba'>
"""
imba{<c-op> '.'}mount {<c-tag> 'pro-router'}
"""
<br>
"A bit more complex example:"
<imba-code url="/{R.param('subview')}">
"""
{<c-tag-def> 'my-app'}
{<c-tag> 'self'}
{<c-tag> "pro-ref-f{<c-el> ' view'}{<c-op> '='}{<c-el> 'v'}"} {<c-op> 'for'} v {<c-op> 'in'} {<c-c> 'R'}{<c-op> '.'}views {<c-com> 'render menu'}
{<c-tag> "pro-router"} {<c-com> 'slot for current view'}
{<c-tag-def> 'view-hello'}
{<c-tag> 'self'} 'Hello World!'
{<c-tag-def> 'view-another-view'}
{<c-tag> 'self'} 'This is another view.'
imba{<c-op> '.'}mount {<c-tag> 'my-app'}
"""
<div[d:vcc h:140px] slot="live">
<example-menu[mb:30px]>
<{ "example-{R.param('subview')}" }>
<br>
<pro-tip>
"You can override current view and display another. For example defined by param from url:"
<imba-code>
<c-tag> "pro-router{<c-el> ' view'}{<c-op> '='}{<c-c> 'R'}{<c-op> '.'}param{<.c-br> '('}{<c-str> 'subview'}{<.c-br> ')'}"
<br>
<br>
tag example-menu
<self>
<example-pro-ref-f.button params={}> "HELLO"
<example-pro-ref-f.button params={ subview: 'another-view' }> "ANOTHER-VIEW"
tag example-pro-ref-f < pro-ref-f
def render
let link = go || url
<self[d:inline].active=(R.to_path! == link) href=link @click.prevent=R.go(link)><slot>
tag example-hello
<self> 'Hello World!'
tag example-another-view
<self> 'This is another view.'
R.getters.subview = do |v| v || 'hello'
Write Preview
Loading…
Cancel
Save