docs/decks/azconf-dev-2021/reactive-controller-host-source.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
version="1.1"
viewBox="0 0 194.34142 102.19245"
id="svg1089"
sodipodi:docname="reactive-controller-host-source.svg"
inkscape:version="1.2-dev (9ee32be, 2021-06-19)"
width="194.34142"
height="102.19245"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1091"
pagecolor="#505050"
bordercolor="#ffffff"
borderopacity="1"
inkscape:pageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="1"
showgrid="false"
inkscape:snap-global="false"
inkscape:zoom="6.6805162"
inkscape:cx="93.855022"
inkscape:cy="49.696758"
inkscape:window-width="2558"
inkscape:window-height="1279"
inkscape:window-x="0"
inkscape:window-y="23"
inkscape:window-maximized="0"
inkscape:current-layer="layer1"
fit-margin-top="1"
fit-margin-left="1"
fit-margin-bottom="1"
fit-margin-right="1"
lock-margins="true" />
<defs
id="defs1071">
<marker
style="overflow:visible"
id="Arrow1Mend"
refX="0"
refY="0"
orient="auto"
inkscape:stockid="Arrow1Mend"
inkscape:isstock="true">
<path
transform="matrix(-0.4,0,0,-0.4,-4,0)"
style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path33802" />
</marker>
<marker
style="overflow:visible"
id="marker34106"
refX="0"
refY="0"
orient="auto"
inkscape:stockid="Arrow1Lend"
inkscape:isstock="true">
<path
transform="matrix(-0.8,0,0,-0.8,-10,0)"
style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path34104" />
</marker>
<marker
style="overflow:visible"
id="Arrow2Lend"
refX="0"
refY="0"
orient="auto"
inkscape:stockid="Arrow2Lend"
inkscape:isstock="true">
<path
transform="matrix(-1.1,0,0,-1.1,-1.1,0)"
d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
style="fill:context-stroke;fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round"
id="path33814" />
</marker>
<marker
style="overflow:visible"
id="Arrow1Lend"
refX="0"
refY="0"
orient="auto"
inkscape:stockid="Arrow1Lend"
inkscape:isstock="true">
<path
transform="matrix(-0.8,0,0,-0.8,-10,0)"
style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
d="M 0,0 5,-5 -12.5,0 5,5 Z"
id="path33796" />
</marker>
<linearGradient
id="reactive-controller-channel-gradient">
<stop
stop-color="#304ffe"
offset="0"
id="stop1063" />
<stop
stop-color="#311b92"
offset="1"
id="stop1065" />
</linearGradient>
<linearGradient
id="reactive-controller-channel-gradient-top"
x1="116.63"
x2="114.81"
y1="54.133999"
y2="64.663002"
gradientUnits="userSpaceOnUse"
xlink:href="#reactive-controller-channel-gradient" />
<linearGradient
id="reactive-controller-channel-gradient-sid"
x1="116.63"
x2="114.81"
y1="54.133999"
y2="64.663002"
gradientTransform="rotate(90,115.07,75.08)"
gradientUnits="userSpaceOnUse"
xlink:href="#reactive-controller-channel-gradient" />
<linearGradient
id="reactive-controller-channel-gradient-bot"
x1="116.63"
x2="117.77"
y1="54.133999"
y2="64.371002"
gradientTransform="rotate(180,116.35,74.918)"
gradientUnits="userSpaceOnUse"
xlink:href="#reactive-controller-channel-gradient" />
</defs>
<g
inkscape:groupmode="layer"
id="layer1"
inkscape:label="base"
transform="translate(-8.0000002,-27.868885)">
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8px;line-height:1.25;font-family:Recursive;-inkscape-font-specification:'Recursive, @MONO=1.00,wght=400';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;font-variation-settings:'MONO' 1, 'wght' 400;fill:#000000;fill-opacity:1;stroke:none"
x="8.3360004"
y="37.422253"
id="text3019"
inkscape:label="text-litelement"><tspan
sodipodi:role="line"
id="tspan3017"
x="8.3360004"
y="37.422253"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8px;font-family:Recursive;-inkscape-font-specification:'Recursive, @MONO=1.00,wght=400';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;font-variation-settings:'MONO' 1, 'wght' 400">LitElement</tspan></text>
<path
id="reactive-controller-diagram-litelement"
fill="#03a9f4"
stroke="#000000"
stroke-width="1px"
d="m 141.35381,63.996317 c -4.9338,-5.0578 -7.3413,-27.662 5.1168,-33.397 9.7507,-2.3192 20.064,-0.7436 29.968,-0.1709 11.255,1.227 23.763,8.5738 24.035,21.12 -1.1042,13.985 0.33265,27.77 0.34858,41.724 0.19748,13.445003 -0.78538,29.382003 -21.751,33.063003 -14.221,2.5468 -22.985,4.5436 -33.215,-3.6636 -9.9752,-6.641 -8.8244,-24.877003 4.5748,-26.095003 9.4947,0.7231 20.293,-6.7773 17.358,-17.311 -2.7212,-19.819 -21.998,-10.72 -26.435,-15.269 z" />
</g>
<g
id="reactive-controller-diagram-reactivecontrollerhost"
stroke="#000000"
stroke-width="1px"
transform="translate(-8.0000002,-27.868885)">
<path
fill="#304ffe"
d="m 137.52381,54.233317 c -1.8974,-11.104 10.706,-13.195 20.308,-11.415 12.983,3.4573 22.704,16.021 22.121,29.576 -0.62885,13.266 1.3828,28.969003 -9.4638,38.898003 -7.3086,5.9972 -21.478,9.3509 -27.232,3.7554 -7.0459,-7.9921 -1.7287,-19.576003 7.1701,-18.471003 15.129,-1.7532 17.29,-7.0363 16.909,-17.041 -2.0612,-18.906 -17.411,-10.863 -25.479,-15.03 -2.7822,-2.1703 -3.8357,-7.3609 -4.3331,-10.271 z"
id="path1074"
inkscape:label="reactive-controller-diagram-host"
stroke-dasharray="1, 1" />
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.6667px;line-height:1.25;font-family:Recursive;-inkscape-font-specification:'Recursive, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:none"
x="8.7600002"
y="48.912315"
id="text7669"
inkscape:label="text-reactivecontrollerhost"><tspan
sodipodi:role="line"
id="tspan7667"
x="8.7600002"
y="48.912315"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8px;font-family:Recursive;-inkscape-font-specification:'Recursive, @MONO=1.00,wght=400';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;font-variation-settings:'MONO' 1, 'wght' 400">ReactiveControllerHost</tspan></text>
</g>
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="reactive-controller"
transform="translate(-8.0000002,-27.868885)">
<text
xml:space="preserve"
style="font-size:18.6667px;line-height:1.25;font-family:Recursive;-inkscape-font-specification:'Recursive, Normal'"
x="8.7600002"
y="125.14003"
id="text13307"
inkscape:label="text-reactivecontroller"><tspan
sodipodi:role="line"
id="tspan13305"
x="8.7600002"
y="125.14003"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8px;font-family:Recursive;-inkscape-font-specification:'Recursive, @MONO=1.00,wght=400';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;font-variation-settings:'MONO' 1, 'wght' 400">ReactiveController</tspan></text>
<path
fill="#311b92"
id="reactive-controller-diagram-controller"
d="m 104.03581,78.732317 c -0.71937,-8.1848 4.3802,-16.225 11.755,-19.628 4.2706,-2.0616 9.6417,-1.1004 14.25,0.05564 6.0088,3.2386 7.0777,7.369 7.0777,7.369 3.6306,3.4964 8.7767,1.4921 13.718,2.3834 2.2562,0.04611 5.8648,2.7514 7.481,4.3093 5.7099,5.0626 4.3146,15.935 -2.8983,18.869 -3.2582,1.368 -6.8117,0.3382 -9.8579,-1.0513 -5.3238,-1.8757 -10.873,0.3943 -15.655,2.7545 -4.9289,2.396 -10.471,5.0922 -16.046,3.3953 -4.5781,-1.3213 -7.4575,-5.7374 -9.0196,-9.9881 -0.93034,-2.6975 -1.3886,-5.6454 -0.80435,-8.4694 z"
inkscape:label="reactive-controller-diagram-controller"
style="display:inline;stroke:#000000;stroke-opacity:1" />
</g>
<g
id="g1087"
style="display:inline"
inkscape:label="reactive-controller-diagram-channels"
transform="translate(28.673813,-21.282568)">
<text
xml:space="preserve"
style="font-size:14.7806px;line-height:0.5;font-family:Recursive;-inkscape-font-specification:'Recursive, Normal';stroke-width:0.821142"
x="-8.3396015"
y="62.991917"
id="text17548"
inkscape:label="reactive-interfaces"
transform="scale(1.0077619,0.99229791)"><tspan
sodipodi:role="line"
x="-8.3396015"
y="62.991917"
id="tspan17774"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.56914px;font-family:Recursive;-inkscape-font-specification:'Recursive, @MONO=1.00,wght=400';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;font-variation-settings:'MONO' 1, 'wght' 400;stroke-width:0.821142"><tspan
id="tspan21280"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.56914px;font-family:Recursive;-inkscape-font-specification:'Recursive, @MONO=1.00,wght=400';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;font-variation-settings:'MONO' 1, 'wght' 400;stroke-width:0.821142"> addController</tspan></tspan><tspan
sodipodi:role="line"
x="-8.3396015"
y="70.724358"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.56914px;font-family:Recursive;-inkscape-font-specification:'Recursive, @MONO=1.00,wght=400';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;font-variation-settings:'MONO' 1, 'wght' 400;stroke-width:0.821142"
id="tspan28834"><tspan
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.56914px;font-family:Recursive;-inkscape-font-specification:'Recursive, @MONO=1.00,wght=400';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;font-variation-settings:'MONO' 1, 'wght' 400;stroke-width:0.821142"
id="tspan28836"> requestUpdate</tspan></tspan><tspan
sodipodi:role="line"
x="-8.3396015"
y="78.456802"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.56914px;font-family:Recursive;-inkscape-font-specification:'Recursive, @MONO=1.00,wght=400';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;font-variation-settings:'MONO' 1, 'wght' 400;stroke-width:0.821142"
id="tspan28838"><tspan
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.56914px;font-family:Recursive;-inkscape-font-specification:'Recursive, @MONO=1.00,wght=400';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;font-variation-settings:'MONO' 1, 'wght' 400;stroke-width:0.821142"
id="tspan28840"></tspan></tspan><tspan
sodipodi:role="line"
x="-8.3396015"
y="86.189247"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.56914px;font-family:Recursive;-inkscape-font-specification:'Recursive, @MONO=1.00,wght=400';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;font-variation-settings:'MONO' 1, 'wght' 400;stroke-width:0.821142"
id="tspan28842"><tspan
dx="0 0.12291598"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.56914px;font-family:Recursive;-inkscape-font-specification:'Recursive, @MONO=1.00,wght=400';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;font-variation-settings:'MONO' 1, 'wght' 400;stroke-width:0.821142"
id="tspan28844">hostConnected</tspan></tspan><tspan
sodipodi:role="line"
x="-8.3396015"
y="93.921692"
dx="0 0 0 -0.36874795 0 0 0 0 0 0 0 0 0.12291598"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.56914px;font-family:Recursive;-inkscape-font-specification:'Recursive, @MONO=1.00,wght=400';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;font-variation-settings:'MONO' 1, 'wght' 400;stroke-width:0.821142"
id="tspan21282">hostUpdated</tspan><tspan
sodipodi:role="line"
x="-8.3396015"
y="101.65414"
dx="0 0 0 0 0 -0.36874795 0 0 0 0 0 0 0 0 0.12291598"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.56914px;font-family:Recursive;-inkscape-font-specification:'Recursive, @MONO=1.00,wght=400';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;font-variation-settings:'MONO' 1, 'wght' 400;stroke-width:0.821142"
id="tspan26868" /><tspan
sodipodi:role="line"
x="-8.3396015"
y="109.38658"
dx="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -0.36874795 0 0 0 0 0 0 0 0 0.12291598"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.56914px;font-family:Recursive;-inkscape-font-specification:'Recursive, @MONO=1.00,wght=400';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;font-variation-settings:'MONO' 1, 'wght' 400;stroke-width:0.821142"
id="tspan21854" /></text>
<path
transform="scale(0.26458)"
fill="#311b92"
stroke="#000000"
stroke-width="3.78px"
d="m 322.01,193.93 c -8.0641,-0.0696 -15.921,1.1536 -22.982,4.5625 -27.873,12.86 -47.147,43.249 -44.428,74.184 -2.208,10.673 -0.47719,21.815 3.0391,32.01 5.9039,16.066 16.787,32.756 34.09,37.75 21.072,6.4134 42.018,-3.7761 60.646,-12.832 18.074,-8.9204 39.047,-17.5 59.168,-10.41 4.1594,1.8973 8.5711,3.6079 13.088,4.7871 4.3807,11.538 2.2687,21.614 -3.3359,42.59 10.911,-2.1573 27.711,-9.3401 37.611,-0.37696 -15.557,-24.276 -14.609,-23.336 -17.693,-40.943 2.5585,-0.36787 5.0976,-1.0376 7.5898,-2.084 11.868,-4.8286 19.565,-15.343 22.697,-27.256 16.95,-3.0148 34.98,5.1522 41.615,7.75 -4.7552,-8.8385 -1.8997,-23.54 5.6797,-33.982 -10.08,8.2999 -29.767,14.366 -46.16,7.2031 -1.3292,-9.5186 -5.5564,-18.539 -12.879,-25.031 -2.3746,-2.2889 -5.893,-5.23 -9.8008,-7.9844 -4.0271,-17.454 2.2552,-31.11 15.002,-39.08 -24.346,2.8983 -33.803,-3.4299 -45.934,-10.807 4.8696,7.6647 8.1558,26.724 5.666,35.533 -0.53345,1.7725 -1.162,3.4891 -1.8711,5.1582 -15.87,-0.63421 -31.576,3.0616 -43.184,-8.1172 0,0 -4.6721,-14.981 -26.752,-27.852 -9.7965,-2.4576 -20.505,-4.682 -30.873,-4.7715 z"
id="path1078"
inkscape:label="controller" />
<g
id="reactive-controller-diagram-channels"
style="display:inline"
inkscape:label="gradients">
<path
fill="url(#reactive-controller-channel-gradient-bot)"
d="m 123.73,99.052 c 0,0 -7.3631,-6.5175 -6.9748,-13.197 2.2351,-11.365 -5.0024,-3.7068 -4.3601,-0.56193 -1.161,-1.575 0.56732,0.02467 0.70159,3.8891 0.066,1.9009 -0.88703,6.2794 -2.0488,8.7818 6.791,-1.1153 12.682,1.0878 12.682,1.0878 z"
id="path1080"
inkscape:label="bottom-gradient"
style="fill:url(#reactive-controller-channel-gradient-bot)" />
<path
fill="url(#reactive-controller-channel-gradient-sid)"
d="m 137.58,71.318 c 0,0 -4.9495,4.8835 -13.124,1.9792 -11.365,-2.2351 5.774,-0.79547 -0.19728,4.3965 -2.1584,1.5911 3.9854,-1.7986 12.598,3.2434 -1.1153,-6.791 1.25265,-9.830912 1.25265,-9.830912 z"
id="path1082"
sodipodi:nodetypes="cccccc"
inkscape:label="side-gradient"
style="fill:url(#reactive-controller-channel-gradient-sid)" />
<path
fill="url(#reactive-controller-channel-gradient-top)"
d="m 111.05,51.075 c 0,0 2.8411,5.9704 1.0676,10.972 -1.8226,5.1404 -3.1631,5.7912 -3.1631,5.7912 0,0 8.8307,-2.8934 10.914,0.27686 1.4728,2.2408 -6.36525,-9.460155 3.94485,-14.622531 -6.791,1.1153 -12.97516,-3.052966 -12.97516,-3.052966 z"
id="path1084"
sodipodi:nodetypes="ccccccc"
inkscape:label="top-gradient"
style="fill:url(#reactive-controller-channel-gradient-top)" />
</g>
<path
style="fill:none;stroke:#673ab7;stroke-width:0.821142px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow1Mend)"
d="m -10.510123,87.022569 c 0,0 -27.003669,-25.12567 8.6709024,-22.320377"
id="path34102"
inkscape:label="data-flow-to" />
<path
style="fill:none;stroke:#673ab7;stroke-width:0.821142px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow1Mend)"
d="m 52.381342,66.024435 c 0,0 27.003669,25.125669 -8.670902,22.320377"
id="path34202"
inkscape:label="data-flow-from" />
</g>
</svg>