all repos — h3 @ 65b9a3aa26e0a8f1cba1ffb9b647ba94d61a5713

A tiny, extremely minimalist JavaScript microframework.

docs/images/h3.sequence.svg

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="880px" preserveAspectRatio="none" style="width:787px;height:880px;" version="1.1" viewBox="0 0 787 880" width="787px" zoomAndPan="magnify"><defs><filter height="300%" id="f8vxuzcxvtuu5" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"/><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/></filter></defs><g><text fill="#000000" font-family="sans-serif" font-size="18" lengthAdjust="spacingAndGlyphs" textLength="208" x="288.75" y="26.708">H3 Sequence Diagram</text><rect fill="#FFFFFF" filter="url(#f8vxuzcxvtuu5)" height="104.5313" style="stroke: #000000; stroke-width: 2.0;" width="506.5" x="182.5" y="450.7109"/><rect fill="#FFFFFF" filter="url(#f8vxuzcxvtuu5)" height="221.0625" style="stroke: #000000; stroke-width: 2.0;" width="676" x="13" y="569.2422"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="64" x2="64" y1="100.25" y2="807.3047"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="236.5" x2="236.5" y1="100.25" y2="807.3047"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="379.5" x2="379.5" y1="100.25" y2="807.3047"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="493" x2="493" y1="100.25" y2="807.3047"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="656" x2="656" y1="100.25" y2="807.3047"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="77" x="23" y="96.9482">Application</text><ellipse cx="64.5" cy="67.9531" fill="#FEFECE" filter="url(#f8vxuzcxvtuu5)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><line style="stroke: #A80036; stroke-width: 2.0;" x1="52.5" x2="76.5" y1="81.9531" y2="81.9531"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="77" x="23" y="819.2998">Application</text><ellipse cx="64.5" cy="838.6016" fill="#FEFECE" filter="url(#f8vxuzcxvtuu5)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><line style="stroke: #A80036; stroke-width: 2.0;" x1="52.5" x2="76.5" y1="852.6016" y2="852.6016"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="82" x="192.5" y="96.9482">Component</text><ellipse cx="236.5" cy="67.9531" fill="#FEFECE" filter="url(#f8vxuzcxvtuu5)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><polygon fill="#A80036" points="232.5,55.9531,238.5,50.9531,236.5,55.9531,238.5,60.9531,232.5,55.9531" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="82" x="192.5" y="819.2998">Component</text><ellipse cx="236.5" cy="838.6016" fill="#FEFECE" filter="url(#f8vxuzcxvtuu5)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><polygon fill="#A80036" points="232.5,826.6016,238.5,821.6016,236.5,826.6016,238.5,831.6016,232.5,826.6016" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="18" x="367.5" y="96.9482">H3</text><ellipse cx="379.5" cy="67.9531" fill="#FEFECE" filter="url(#f8vxuzcxvtuu5)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><line style="stroke: #A80036; stroke-width: 2.0;" x1="367.5" x2="391.5" y1="81.9531" y2="81.9531"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="18" x="367.5" y="819.2998">H3</text><ellipse cx="379.5" cy="838.6016" fill="#FEFECE" filter="url(#f8vxuzcxvtuu5)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><line style="stroke: #A80036; stroke-width: 2.0;" x1="367.5" x2="391.5" y1="852.6016" y2="852.6016"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="47" x="467" y="96.9482">Router</text><ellipse cx="493.5" cy="67.9531" fill="#FEFECE" filter="url(#f8vxuzcxvtuu5)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><line style="stroke: #A80036; stroke-width: 2.0;" x1="481.5" x2="505.5" y1="81.9531" y2="81.9531"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="47" x="467" y="819.2998">Router</text><ellipse cx="493.5" cy="838.6016" fill="#FEFECE" filter="url(#f8vxuzcxvtuu5)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><line style="stroke: #A80036; stroke-width: 2.0;" x1="481.5" x2="505.5" y1="852.6016" y2="852.6016"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="39" x="634" y="96.9482">Store</text><path d="M638.5,47.9531 C638.5,37.9531 656.5,37.9531 656.5,37.9531 C656.5,37.9531 674.5,37.9531 674.5,47.9531 L674.5,73.9531 C674.5,83.9531 656.5,83.9531 656.5,83.9531 C656.5,83.9531 638.5,83.9531 638.5,73.9531 L638.5,47.9531 " fill="#FEFECE" filter="url(#f8vxuzcxvtuu5)" style="stroke: #000000; stroke-width: 1.5;"/><path d="M638.5,47.9531 C638.5,57.9531 656.5,57.9531 656.5,57.9531 C656.5,57.9531 674.5,57.9531 674.5,47.9531 " fill="none" style="stroke: #000000; stroke-width: 1.5;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="39" x="634" y="819.2998">Store</text><path d="M638.5,832.6016 C638.5,822.6016 656.5,822.6016 656.5,822.6016 C656.5,822.6016 674.5,822.6016 674.5,832.6016 L674.5,858.6016 C674.5,868.6016 656.5,868.6016 656.5,868.6016 C656.5,868.6016 638.5,868.6016 638.5,858.6016 L638.5,832.6016 " fill="#FEFECE" filter="url(#f8vxuzcxvtuu5)" style="stroke: #000000; stroke-width: 1.5;"/><path d="M638.5,832.6016 C638.5,842.6016 656.5,842.6016 656.5,842.6016 C656.5,842.6016 674.5,842.6016 674.5,832.6016 " fill="none" style="stroke: #000000; stroke-width: 1.5;"/><polygon fill="#A80036" points="367.5,127.3828,377.5,131.3828,367.5,135.3828,371.5,131.3828" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 2.0,2.0;" x1="64.5" x2="373.5" y1="131.3828" y2="131.3828"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="58" x="71.5" y="126.3169">h3.init()</text><polygon fill="#A80036" points="644.5,156.5156,654.5,160.5156,644.5,164.5156,648.5,160.5156" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="379.5" x2="650.5" y1="160.5156" y2="160.5156"/><text fill="#000000" font-family="sans-serif" font-size="13" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="56" x="386.5" y="155.4497">initialize</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="656.5" x2="698.5" y1="189.6484" y2="189.6484"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="698.5" x2="698.5" y1="189.6484" y2="202.6484"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="657.5" x2="698.5" y1="202.6484" y2="202.6484"/><polygon fill="#A80036" points="667.5,198.6484,657.5,202.6484,667.5,206.6484,663.5,202.6484" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="112" x="663.5" y="184.5825">execute modules</text><polygon fill="#A80036" points="644.5,227.7813,654.5,231.7813,644.5,235.7813,648.5,231.7813" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="379.5" x2="650.5" y1="231.7813" y2="231.7813"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="91" x="386.5" y="226.7153">dispatch($init)</text><polygon fill="#A80036" points="75.5,256.9141,65.5,260.9141,75.5,264.9141,71.5,260.9141" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="69.5" x2="378.5" y1="260.9141" y2="260.9141"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="64" x="81.5" y="255.8481">preStart()</text><polygon fill="#A80036" points="481.5,286.0469,491.5,290.0469,481.5,294.0469,485.5,290.0469" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="379.5" x2="487.5" y1="290.0469" y2="290.0469"/><text fill="#000000" font-family="sans-serif" font-size="13" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="56" x="386.5" y="284.981">initialize</text><polygon fill="#A80036" points="481.5,315.1797,491.5,319.1797,481.5,323.1797,485.5,319.1797" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="379.5" x2="487.5" y1="319.1797" y2="319.1797"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="40" x="386.5" y="314.1138">start()</text><polygon fill="#A80036" points="247.5,344.3125,237.5,348.3125,247.5,352.3125,243.5,348.3125" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="241.5" x2="492.5" y1="348.3125" y2="348.3125"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="54" x="253.5" y="343.2466">render()</text><polygon fill="#A80036" points="644.5,373.4453,654.5,377.4453,644.5,381.4453,648.5,377.4453" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="493.5" x2="650.5" y1="377.4453" y2="377.4453"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="118" x="500.5" y="372.3794">dispatch($redraw)</text><polygon fill="#A80036" points="644.5,402.5781,654.5,406.5781,644.5,410.5781,648.5,406.5781" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="493.5" x2="650.5" y1="406.5781" y2="406.5781"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="139" x="500.5" y="401.5122">dispatch($navigation)</text><polygon fill="#A80036" points="75.5,431.7109,65.5,435.7109,75.5,439.7109,71.5,435.7109" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="69.5" x2="378.5" y1="435.7109" y2="435.7109"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="70" x="81.5" y="430.645">postStart()</text><path d="M182.5,450.7109 L280.5,450.7109 L280.5,457.7109 L270.5,467.7109 L182.5,467.7109 L182.5,450.7109 " fill="#EEEEEE" style="stroke: #000000; stroke-width: 1.0;"/><rect fill="none" height="104.5313" style="stroke: #000000; stroke-width: 2.0;" width="506.5" x="182.5" y="450.7109"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="53" x="197.5" y="463.7778">redraw</text><polygon fill="#A80036" points="367.5,484.9766,377.5,488.9766,367.5,492.9766,371.5,488.9766" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="236.5" x2="373.5" y1="488.9766" y2="488.9766"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="86" x="243.5" y="483.9106">h3.redraw()</text><polygon fill="#A80036" points="247.5,514.1094,237.5,518.1094,247.5,522.1094,243.5,518.1094" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="241.5" x2="378.5" y1="518.1094" y2="518.1094"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="56" x="253.5" y="513.0435">redraw()</text><polygon fill="#A80036" points="644.5,543.2422,654.5,547.2422,644.5,551.2422,648.5,547.2422" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="379.5" x2="650.5" y1="547.2422" y2="547.2422"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="118" x="386.5" y="542.1763">dispatch($redraw)</text><path d="M13,569.2422 L137,569.2422 L137,576.2422 L127,586.2422 L13,586.2422 L13,569.2422 " fill="#EEEEEE" style="stroke: #000000; stroke-width: 1.0;"/><rect fill="none" height="221.0625" style="stroke: #000000; stroke-width: 2.0;" width="676" x="13" y="569.2422"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="79" x="28" y="582.3091">navigation</text><polygon fill="#A80036" points="367.5,603.5078,377.5,607.5078,367.5,611.5078,371.5,607.5078" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="236.5" x2="373.5" y1="607.5078" y2="607.5078"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="119" x="243.5" y="602.4419">h3.navigateTo()</text><polygon fill="#A80036" points="481.5,632.6406,491.5,636.6406,481.5,640.6406,485.5,636.6406" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="379.5" x2="487.5" y1="636.6406" y2="636.6406"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="90" x="386.5" y="631.5747">processPath()</text><polygon fill="#A80036" points="75.5,661.7734,65.5,665.7734,75.5,669.7734,71.5,665.7734" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="69.5" x2="492.5" y1="665.7734" y2="665.7734"/><text fill="#000000" font-family="sans-serif" font-size="13" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="148" x="81.5" y="660.7075">remove all DOM nodes</text><polygon fill="#A80036" points="224.5,690.9063,234.5,694.9063,224.5,698.9063,228.5,694.9063" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="64.5" x2="230.5" y1="694.9063" y2="694.9063"/><text fill="#000000" font-family="sans-serif" font-size="13" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="148" x="71.5" y="689.8403">remove all DOM nodes</text><polygon fill="#A80036" points="247.5,720.0391,237.5,724.0391,247.5,728.0391,243.5,724.0391" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="241.5" x2="492.5" y1="724.0391" y2="724.0391"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="54" x="253.5" y="718.9731">render()</text><polygon fill="#A80036" points="644.5,749.1719,654.5,753.1719,644.5,757.1719,648.5,753.1719" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="493.5" x2="650.5" y1="753.1719" y2="753.1719"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="118" x="500.5" y="748.106">dispatch($redraw)</text><polygon fill="#A80036" points="644.5,778.3047,654.5,782.3047,644.5,786.3047,648.5,782.3047" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="493.5" x2="650.5" y1="782.3047" y2="782.3047"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="139" x="500.5" y="777.2388">dispatch($navigation)</text><!--MD5=[352d431b2ecd2f9ee48a7d6efc890436]
@startuml
title H3 Sequence Diagram

entity Application
control Component
entity H3
entity Router
database Store

Application - -> H3 : <b>h3.init()</b>
H3 -> Store : //initialize//
Store -> Store : //execute modules//
H3 -> Store : dispatch($init)
H3 -> Application : preStart()
H3 -> Router : //initialize//
H3 -> Router : start()
Router -> Component : render()
Router -> Store: dispatch($redraw)
Router -> Store: dispatch($navigation)
H3 -> Application : postStart()

group redraw
    Component -> H3 : <b>h3.redraw()</b>
    H3 -> Component : redraw()
    H3 -> Store: dispatch($redraw)
end

group navigation
    Component -> H3 : <b>h3.navigateTo()</b>
    H3 -> Router : processPath()
    Router -> Application : //remove all DOM nodes//
    Application -> Component : //remove all DOM nodes//
    Router -> Component : render()
    Router -> Store: dispatch($redraw)
    Router -> Store: dispatch($navigation)
end
@enduml

PlantUML version 1.2020.08beta1(Unknown compile time)
(GPL source distribution)
Java Runtime: Java(TM) SE Runtime Environment
JVM: Java HotSpot(TM) 64-Bit Server VM
Java Version: 14.0.1+7
Operating System: Linux
Default Encoding: UTF-8
Language: en
Country: US
--></g></svg>