From 17e9567ce209fe06f0775c188381bac986303865 Mon Sep 17 00:00:00 2001 From: eavichay Date: Sun, 11 Dec 2016 00:37:36 +0200 Subject: [PATCH] web page --- SlimElement.js | 2 +- example/States/index.html | 3 +- example/Tutorial/demo-binding.html | 44 +++++++ example/Tutorial/index.html | 197 +++++++++++++++++++++++++++++ example/Tutorial/slim.js.logo.png | Bin 0 -> 7627 bytes 5 files changed, 243 insertions(+), 3 deletions(-) create mode 100644 example/Tutorial/demo-binding.html create mode 100644 example/Tutorial/index.html create mode 100644 example/Tutorial/slim.js.logo.png diff --git a/SlimElement.js b/SlimElement.js index b628db2..ad4d1ee 100644 --- a/SlimElement.js +++ b/SlimElement.js @@ -384,7 +384,7 @@ } - Slim('s-states', class extends SlimBaseElement { + Slim('slim-states', class extends SlimBaseElement { get updateOnAttributes() { return ['current-state'] diff --git a/example/States/index.html b/example/States/index.html index 1308c0e..36e4858 100644 --- a/example/States/index.html +++ b/example/States/index.html @@ -5,7 +5,6 @@ SlimJS - States Demo - @@ -24,7 +23,7 @@ + \ No newline at end of file diff --git a/example/Tutorial/index.html b/example/Tutorial/index.html new file mode 100644 index 0000000..fd3943e --- /dev/null +++ b/example/Tutorial/index.html @@ -0,0 +1,197 @@ + + + + + SlimJS - Hello, World! + + + + + + + + + +Fork me on GitHub + + +
+

SLIM is your PRODUCTIVE way for building your own NATIVE web components

+
+

With es6 and slim you could write native web components double-time with no hassle of using external libraries that affect your workflow

+

Meet SlimJS

+ + +
+

Here's a demo web component.
Insinde you could find two text input with two ids: "in" and "out". Please type anything into "in"

+ +
+
+

Dependency injection is quite easy. Use curly braces for declarative dependency injection in your project. + Wherever and whenever your component appears, it receives the requirements as you define it

+
<my-component myModel={ApplicationModel} />
+

And in some other part of your code

+
Slim.define('ApplicationModel', () => { return appModelInstance })
+
+
+

Use any array as data-source for repeaters. Every item in the array will be injected as data property to each replica. Easy!

+
<span slim-repeat="dataSource" bind>[[data.name]]</span>
+

Assuming the source has name property in each item, you would expect an output similiar to this: Alpha Beta Gamma Delta Echo ...

+
+
+ +

This is all possible thanks to SlimJS, and without effort as seen in the code. SlimJS is not a framework! + it's a series of es6 classes and base-classes + the are here for you to build your own native web components, without the sweat. + No need to comply to a 3rd party library's conventions anymore. Fear not of performance issues, it's native, it's easy and it's light.

+ +

Features

+

Pick a feature and see how it works

+ +

Get SlimJS

+
bower install slimjs
+npm install slim-js
+ + + + + + + + \ No newline at end of file diff --git a/example/Tutorial/slim.js.logo.png b/example/Tutorial/slim.js.logo.png new file mode 100644 index 0000000000000000000000000000000000000000..837031fd7de5a42c1176bf5924e52eb08eddaae7 GIT binary patch literal 7627 zcmZ{I1yCH_w)ISaK?k?MAQ4rf7z`5wfj1-Xfz$F~jtR_FRi!^sGcsNV(HtM=tqa}ltaWYP?tT9A zaO&H>=LbkQYxs3VRmX4a}Fqak=S8r$sZV@fLDr+8;bU2 z3VIJ|orX?8Zl>G^l$ zV9%L}yhN+_*(rximWC5^LEgJAmV47KAu|GQc`G)KYL^ox?RQg+>DS z3EsrTps2gcr1alWcf%ZmknCMN!D(lGm0dwAy0EZmR}hc=fnXU8${p*3Gr<>>KI%_< zyuoE&@eDSY8_U(<&2t3eT_l2%kq=PQb)f-w!*VZSk#)_rC%Q%qTrId{}7 zn{;+kX|fua!58RSck}SD;)*i5MPggw1gt+0LyU>D_>cf5>k=*KNNo8dMQl6)Qx_}Z zVnh01q04ZfEHDavWGy&&2JWF-=qi0xTay=g zzvu;V@?+TgsrvJWH-~!QDtN_ctH=W4fM5x21$tV@izYlrya;r4Nt;5}*&+a31f0}a$0hs#na}`8-OcuT_Mb`o#?1&JQJuAHr43~ zDWc!fL?9FpR@7EJi_w9Wf;#u5!E1lT-&t3YSjy5eLlP0MlIdKvcatV? ziKG^bJJePdSQcI_j4zmwrIjj}&EeaGHxV>ZuC`UjR+rdk*r(Z-9P{ZULgbZYJ~E^; zYcYGu*BYIUzf6^4jWH#0&|9eA|5+&KP2+8Kt9|?IR{GZWhY{gE1|^0Zh5(T+VIF-U z5tuNY!IJS*tE-x~R8qY`%an4&X_o5nCWmXZHR*l9<$f`mI^LlumB3qf~?C@ghV)tVB;fDp^g)&YzE^#gw zE;6n>YkaQfSH4x9F4_s5Pn z+#B7G+^LS#u5zxH_BD^z7l#kuUL{}M9Ndt>LGMB6pj1#RmWhO&MD3PvzwoQr#2UQm z@>OeihW)W=j)}gLp!G|uZ&pcmbEZFhJ}rGK9~2<*WP5b9waBvf8MsQ!jLnSKsny9| z5pYFvZSgL-HNcDxFB_zdc^}i77LoQT?T+P4Pp#&@rbX9X*T1pl6R|drcKoXKisV;~ z6)bk^SW#)b?MjxRrA3cqht3l#0lQAOPIV8brS-pT2jmWJ>?P#1_P3X*LZtHK~_epKi%BASn{jX6pwb7e84@5+gCq^f(jV#gYYiMgI zEeyEC?{uc))Ya=I_7nz|oQ_qeetFMOD{tuT*!2Q8FWB+{LY}QBzSZ%u`iS@RW z(K6>`Xrn)1(0Mn-McRzQRKe6}fNvmmAZ|cl;4GR-2`W#oK)T)G%+%&Y&`p5zTA3E* zHHA`^GPa7NVsDvbS@FCCsQWYy~}Kc!l%eoi0F94#O5f2pe5>t4 z7sS0G7vQmR9Q(?dvz@Bmnc2o?bLrGx+D_9>)e`1pGp;^5K1%+(_vpiKzbHSkNBH}@ z8q@&EKO+yHtg;7Ny1#xVfnwB>WD%zk1+bWs82lMMF8h&R+B)oT#?ZpL(Sy_(+FBG? zHb1qBe~@&XRABJfnWb=0f>J`|QMch=GtqDir~F2_MXAu3gR*4Tn)`<)zd3e+;=UdMoIxftF;@3-pW7q zFTB6qc3sYsG_WbUoeK=H4jDlX_1ACr-wl*>8jN@Nu-+Md_8Gh!D{)Le#nhsxZ82)> z^!UlY?K2KOBA?``apZomyw+2XcUQS&$=0jsZs~ULSNJ`(>CxeT@$oK~$urZ_X-&_k zu1=)s&m%kggpOw_g2?QCB4 zH2dE?JbLk4_+(Av*IO0=FrGv8A%L@w&qSk;gQCA%77pkO=MizHA6TK^)8&oNG>RuF zP`G49**s1Gjm~^}wb-UjQhm_FQgbixcbv>K8fb2kLI(oRNQ#JfJx4fJ9h7BMATiz(pGkZ8vQt zMSe3U2UZhvCsPYnF9+yTV+#NXdhtIE9W2~TsJ$HQ9bNgogkJuG;C~wb4YR$Z{s-b_ zC-hQVNtIf{$;E=2iy7(>g4Vw z^z!9jq5mBJs?*KJ^1qcFUH?6;rwOwCeZ%&Km7VQB+)t^3f1~^oP7Y8P3s=`Ce&IKQ z{~-Ur*njK%3$Nm0WARk!-+KOo|DUn{jaPkYcbuMFbFnd#b9A$Cc@q0~Hpjo!{%^#; zxdhq%PW*ou@h_MEi9XpZj3LPOpCuE8xOyJ(-tn;k9)9)txjP-1iI*g?SWDi~@ ztLI9{1DX4@x}SBn#8T+j*D<){uE?h=1gvBb|h$EqWQn!yT_b zvPuRPgq6GQK_#;mqnL44^-OZ68B3HU--g>JNZ{s}Nm-n{_)MU?q05F7zIRMAE?)Uf zyNg_kU0l{{s@F2PnDA3uW?Ib*_l&Z&2OJ|1t#vbg@_X*Pk)7Je%S2^!&zTL3P>rzy zOStxZq?TPr$8hD?D*1JdHNVF0^ZDZOon3}>4H<7n38u;I0o7cWXmwUYh_d3DnRYW)3Bq)Lhk`i151Sd%V%D`P|Lv6%CGDdVm2!#ifyrf5&@Wb0&WZY~iXQ)Q~BVsz5ETHf+*N=#6h zrmWyoU_iT{x4JLmn6I4{5oNfhM;`0-WS+lJ)y`@&_@wpFEmBXZ%jo-EykRBux z@*-%c4Gc}JN4E$0z3&E9gBFdEWG%3)w(dJ&HT;OA77Htz*@8}sU%Ca~o9W%?-{;*Y za1szoA{mrowht6k@c8YBEj5R`nPcm!ANoQR&;p?0>g6bTl{2VO&m-i8`upWK9EufA z;tJ*eWbbnIs^!gguu{Q`Pu;AUh81OmUhx`!C;a`8SE+QL(3+r{>GV!g>*f%Do`%L} zz@VP|rf1i!N`T`!NkOUNhCAgAqwY{cVI^YTd8awjvQp%o_l$trp&J4ONo$w&!kHnc zMY;+Rk(6r@g(a#w`-&Et53pw*3~_8uP-&Qh49_FaiU)qcjGRfaJUN7Ul3(Fn3}?NY zrjtr7NY>L|4o0@`(KkH~{gy{t;2#bP50-}Le#WS(%BUgqLGI1ghawx^OvFikS1Q-S zG>{ZAP7f>LCW_!4RL6szf>$mYzXkaADFr&rEuu(27mY* zD?=s{1fLYEZ{-o3&{hOnHi#rW-{&ibQy_rn5ZH^-S66K}A>+F3?IpT;?d3JaaTXh$ z;kBnRJ=m96A|FL0TF+*}R~b^>;6*dzv!bZ4Aklq%O6ULuDMn{rt%pacDx=t;{mB$0vTxzqi%t(-_Gb*k2D$^l7oLB?zs?RqSFcV4+&6l z&ct~XKQt+#49ulaWjUqHy>}(#7UZ|G4C%0BN9Jk_ji%I#B{ku?Icv-%jM#emdjD(4 zJTDgmBj<;X-aGew^+sBD`2)5~Wtm?ikDTt2bBiY#;|6C&I)Av8$%iUzzMVPlv{|TX zDk-LCkAtpl7jmazCh0#6>HQX1S$^0_?j27v`35%5QbD=zE1< zWKl$>a8Y_OsV~gi^l!Nf^+C;$y>R-6hA>0yL?8$OPf;M_509Bhk5Je`fM#HEV zg5=j?Qmm}UXTofnxw-QB4jVX5tC(wJX0e3vB$_CS2HEKYeO=9Vo+hQ|s?1`M+ZA0|45e8$-3fhC6i;5n>AW{Z-LT21PZ-<0aPzG6FA4 zKKP>-({$8cAmJvjZ73<2qM~{u_xr#PqV<_cw7!&8GHRWj7cO3WfxiuSm!V}!YU}4? zx<+%AAv`0d%X^%Y;iW_y|D-y)3$tA3lblzWllTbShKtV-#G(?;1L9?J`nk(cuTtK^ z4eJSy0fC^kh*jhkq|;{$Ax)B)0_0(W>?eyiZSj)Qn`Nn)gFJFd`kM8omuWwVs$e2I z6Lu!mzOJt8=}mj1nqpGcny`gVqTFFM+$#3mhZL^S_kqP6s$_KJQqx`n831d){7@4F z4jkt*fO8oK4pK#03b{6Z%WEvfJCahq25q)Z0iSR3O}s6<61e#NHQhxA#;R^%&Xf;P z(p%i<+InaitkpFA0%xnNnCC_rsOSU`}w-Jd5oWX z;Y^_71Z@V51{tzaVS!xXXMk?Uvat9IzXyZu`i^eA)Pgcc+WmF0<%ymGwTeOZB|tty zm3p*mwt+d7xgt{LX}ktVH&l0?T_(i*3wW>{1rF3D_^9LvK((6CJi>EH62XBU9bnJc zY=r`M&`#M|ShT-%q$0`qp{we}8#it*SH2Pz!@(5gzU?^t+SOn>No<7~|+$t+*n)*0qUdCpG(=08JVxiJHl%$FL-0x&!QuLz75S z)T6AW_H+RmPq3*d(oWj^C;~&&8w8z_iC;$ZnnZ@aft^D>sFAV9HF0fq3+5AT5s-Zb zYG~tipwvZBY`K-csc#5BudZe?D2^D3DM&<-p?MEKKvW>Tr0^o@PgAy`UVoG={iQRz z+7+4*Lpk;0jUU-vt`ypV5TDz8m}h#3JSYbyy!m)lSk7b4Qy zKX7(_RY~WiI$1E>`s%{vu8n}qx=JL6;YV$6`vJmG)Jble2{{zlnt&Zo85nU65e@yG zwqPn+u0Z#ECAqe4|<6U%Pwyf_0Lf+)5lVTjLDsq;sek6%9vsu2G{!M9G zU7v6ITI%m+p|06kl<0t_l@;au0-T0fZU!V#Gy@2^;=!O9JrJnM>1!x0%o!Uc14EZB zi}jUP;tF$HILY3Z*W4ek8rE|n(DWy8Qdo56L@OVy)?|?(stdl-3wkH*6DSeH(SCHaYbP56W7|?tYkT=TUtu zA5odq_KP&}M}l;jz}PLP>hdE+HYvUhIVqehIt_52p`B|c9^P@bMpWDDJ#AeRqWLm3 z?YxB~_s{$=KO+UZ4l@C3! zF}9!c(Y)xX-=QZF&~ zsq43_Zp(I(dMKv9(>GuCIoP3!3hwRm==dVLrH(uvJBDoUk=8`s)v|uVwV32A$)hQ8 zNI;q{qx#&xa@fAB*XYVUZ^r2?z}fzEAlRGc~G?#u5Vt#gKan9zcVs98p% zc-OCA-s53pU?G_bDS#(*rL|4^vEuG0&9_C#+&iku1qXau8Skf(dKTVdQtk#A2Ju9n zVx;*9U%rpfy=kl2bvdW~b~L9y(t?}0o9EQ>yJ%5f+AfZjyCrQyS~i}H?ZY?tRlr0j z`KA_tjMCx-Lfn>$-61rlW+O=Ny-@E3f-)fuOZ&64x`_oedc1^U{A}O&(%(P(xt!Xt zoq?lf2wREJ+|u>uE|Xv9qbsGEW_d#%9+;z^IJ#p--(#Gxh$Eei=BSiiy0blvS!Rrz`R8FP<>={-kef>lROBFX9> z%{XkLiz5B5osmcXLxc9#-Vd=eG{kb*qFpvSP!lh)XyN8bg{VoF094v1sI{F zEj+YQ|B}mMgRZ8Mf6s9=Y-kY)O3wxih0h{xV5D6j>qtIhV#L~|FPx7q{>w9L5>DgV z`3a?XxH)6=n1;LFFD4rzFX#2LGD$>5eLlDy?F6>KFiJq;f z31_PG_<1_^Fut56jELT!UK_hDp&)qf)f~VR>3ss_Qd)ixh*ztIAnD^6E)C5|?_b=f z2XO^k6A~9yJL7x-EBv+DfSahSjyq1)=E^>Oi?613Ffh2>brRE<-R?*Fl1q(A)H296 zDy!4+g`ap>dKXBpD&Ep?T470A&G?&`c$xq+~ zc?Zve2Js?H(B00*@cYdj)5WwO755l{n#ao_vJFy6C{kagAhBesG&FpVYaO@0W@9SO zbJmb}kmJQjZhy$1gJXg+&E>3pRTUQ2+%cja4H*JA$Jmvzj+(O)cfSkIOCInMqc&) Rz`wt;