These are chat archives for canjs/canjs

4th
Nov 2017
Frank Lemanschik
@frank-dspeed
Nov 04 2017 14:50
@phillipskevin do you got a idea maybe where i could get that "No custom element found for can-import" away :)
i don't find where can-import comes from
Frank Lemanschik
@frank-dspeed
Nov 04 2017 15:40
can i do that only from inside a can-component?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Nov 04 2017 22:02
I have multiple promises in my component ViewModel, is there a way to use theme (merge) in one promise to work with in stache, if this one promise is resolved so I can show the template content, I found this https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all but I dont figure out how to use it
Frank Lemanschik
@frank-dspeed
Nov 04 2017 22:03
@cherifGsoul easy going
Primise.all(arrayOfPromise).then()
promise all will resolve or fail when all promises are resolved
ore one failed
so return Promise.all([this.myPrimse,this.userPromise])
Mohamed Cherif Bouchelaghem
@cherifGsoul
Nov 04 2017 22:11
thank you @frank-dspeed I will try that
Frank Lemanschik
@frank-dspeed
Nov 04 2017 22:12
@cherifGsoul do you maybe understand or know how i could render a stach template with a viewModel ?
i mean from a script tag?
i am trying to some how render stache but its more hard then i tought to get a inital stache rendered with can-import working
Mohamed Cherif Bouchelaghem
@cherifGsoul
Nov 04 2017 22:14
@frank-dspeed I dont understand your use case
Frank Lemanschik
@frank-dspeed
Nov 04 2017 22:14
i want to use only HTML
Mohamed Cherif Bouchelaghem
@cherifGsoul
Nov 04 2017 22:14
Ah
use can-view-autorender
Frank Lemanschik
@frank-dspeed
Nov 04 2017 22:15
and i have a problem with the inital view scope
i am doing that
but that still gives me
Mohamed Cherif Bouchelaghem
@cherifGsoul
Nov 04 2017 22:15
so with can-view-model get the viewModel and put what you want or replace it
Frank Lemanschik
@frank-dspeed
Nov 04 2017 22:15
can-log.js:106 WARN: can-view-callbacks: No custom element found for can-import
exports._logger @ can-log.js:106
exports.warn @ can-log.js:39
warn @ dev.js:68
tagHandler @ can-view-callbacks.js:129
(anonymous) @ can-stache.js:212
hydrateCallbacks @ can-view-target.js:257
hydrate @ can-view-target.js:276
(anonymous) @ html_section.js:99
(anonymous) @ can-observation.js:593
(anonymous) @ can-stache.js:438
(anonymous) @ html_section.js:51
(anonymous) @ can-observation.js:593
render @ can-view-autorender.js:44
(anonymous) @ can-view-autorender.js:84
tryCatchReject @ steal.js:1183
runContinuation1 @ steal.js:1142
Fulfilled.when @ steal.js:930
Pending.run @ steal.js:821
Scheduler._drain @ steal.js:97
Scheduler.drain @ steal.js:62
run @ steal.js:268
characterData (async)
(anonymous) @ steal.js:274
Scheduler.run @ steal.js:87
Scheduler.enqueue @ steal.js:72
Pending.become @ steal.js:833
Pending.resolve @ steal.js:786
promiseResolve @ steal.js:390
(anonymous) @ steal.js:3284
load @ steal.js:3065
xhr.onreadystatechange @ steal.js:3077
XMLHttpRequest.send (async)
(anonymous) @ VM22247:1
wrappedFn @ register.js:105
fetchTextFromURL @ steal.js:3090
(anonymous) @ steal.js:3283
init @ steal.js:377
Promise @ steal.js:365
value @ steal.js:3282
loader.fetch @ steal.js:4155
loader.fetch @ steal.js:5339
loader.fetch @ steal.js:5440
loader.fetch @ steal.js:6613
System.fetch @ npm-extension.js:332
(anonymous) @ steal.js:1530
tryCatchReject @ steal.js:1183
runContinuation1 @ steal.js:1142
Fulfilled.when @ steal.js:930
Pending.run @ steal.js:821
Scheduler._drain @ steal.js:97
Scheduler.drain @ steal.js:62
run @ steal.js:268
characterData (async)
(anonymous) @ steal.js:274
Scheduler.run @ steal.js:87
Scheduler.enqueue @ steal.js:72
Pending.become @ steal.js:833
Pending.resolve @ steal.js:786
promiseResolve @ steal.js:390
(anonymous) @ steal.js:3284
load @ steal.js:3065
xhr.onreadystatechange @ steal.js:3077
XMLHttpRequest.send (async)
(anonymous) @ VM22247:1
wrappedFn @ register.js:105
fetchTextFromURL @ steal.js:3090
(anonymous) @ steal.js:3283
init @ steal.js:377
Promise @ steal.js:365
value @ steal.js:3282
loader.fetch @ steal.js:4155
loader.fetch @ steal.js:5339
loader.fetch @ steal.js:5440
loader.fetch @ steal.js:6613
System.fetch @ npm-extension.js:332
(anonymous) @ steal.js:1530
tryCatchReject @ steal.js:1183
runContinuation1 @ steal.js:1142
Fulfilled.when @ steal.js:930
Pending.run @ steal.js:821
Scheduler._drain @ steal.js:97
Scheduler.drain @ steal.js:62
run @ steal.js:268
characterData (async)
(anonymous) @ steal.js:274
Scheduler.run @ steal.js:87
Scheduler.enqueue @ steal.js:72
Pending.become @ steal.js:833
Pending.resolve @ steal.js:786
promiseResolve @ steal.js:390
(anonymous) @ steal.js:3284
load @ steal.js:3065
xhr.onreadystatechange @ steal.js:3077
XMLHttpRequest.send (async)
(anonymous) @ VM22247:1
wrappedFn @ register.js:105
fetchTextFromURL @ steal.js:3090
(anonymous) @ steal.js:3283
init @ steal.js:377
Promise @ steal.js:365
value @ steal.js:3282
loader.fetch @ steal.js:4155
loader.fetch @ steal.js:5339
loader.fetch @ steal.js:5440
loader.fetch @ steal.js:6613
System.fetch @ npm-extension.js:332
fetch @ npm-crawl.js:559
load @ npm-crawl.js:547
npmLoad @ npm-crawl.js:723
fetchDep @ npm-crawl.js:166
dep @ npm-crawl.js:75
System.normalize @ npm-extension.js:239
loader.instantiate @ steal.js:4257
loader.instantiate @ steal.js:4574
loader.instantiate @ steal.js:4687
loader.instantiate @ steal.js:5060
loader.instantiate @ steal.js:5378
loader.instantiate @ steal.js:6252
loader.instantiate @ steal.js:6309
loader.instantiate @ steal.js:6451
loader.instantiate @ steal.js:6578
(anonymous) @ steal.js:1553
tryCatchReject @ steal.js:1183
runContinuation1 @ steal.js:1142
Fulfilled.when @ steal.js:930
Pending.run @ steal.js:821
Scheduler._drain @ steal.js:97
Scheduler.drain @ steal.js:62
run @ steal.js:268
characterData (async)
(anonymous) @ steal.js:274
Scheduler.run @ steal.js:87
Scheduler.enqueue @ steal.js:72
Pending.become @ steal.js:833
Pending.resolve @ steal.js:786
promiseResolve @ steal.js:390
(anonymous) @ steal.js:3284
load @ st
upa
ups
can-log.js:106 WARN: can-view-callbacks: No custom element found for can-import
:)
Mohamed Cherif Bouchelaghem
@cherifGsoul
Nov 04 2017 22:16
yes
Frank Lemanschik
@frank-dspeed
Nov 04 2017 22:16
i need to use can import some how inside that
Mohamed Cherif Bouchelaghem
@cherifGsoul
Nov 04 2017 22:17
how do you render the template?
Frank Lemanschik
@frank-dspeed
Nov 04 2017 22:18
    let template = document.createElement('script')
    template.setAttribute('type',"text/stache")
    template.setAttribute('can-autorender',"")
    template.innerText = innerHTML

    let script = document.createElement('script')
    script.setAttribute('src','./node_modules/steal/steal.js')

    script.setAttribute('main','can-view-autorender')
    //script.setAttribute('deps-bundle','')
    this.appendChild(template)
    this.parentNode.appendChild(script)
all works nice only can import don't works
and i don't know how to supply it data like a define map without that
my idea was to have <can-import from="~/application/view.js" export-as="viewModel" />
inside that stache to give it its viewModel
Mohamed Cherif Bouchelaghem
@cherifGsoul
Nov 04 2017 22:20
why all this?
Frank Lemanschik
@frank-dspeed
Nov 04 2017 22:20
inovating the future :)
Mohamed Cherif Bouchelaghem
@cherifGsoul
Nov 04 2017 22:20
where you get theinnerHTML
Frank Lemanschik
@frank-dspeed
Nov 04 2017 22:20
WebComponents
let innerHTML = `
        <can-import from="~/application/view.js" export-as="viewModel" />
        <div class="container">
        <h1> Main Application </h1>
        <button on:click="key()">my button</button>
        {{#switch(page)}}
          {{#case("home")}}
              <components-report></components-report>
          {{/case}}
          {{#case("manager")}}
              <button value="view">I am Manager </button>
          {{/case}}
          {{#case("login")}}
              <login-element></login-element>
          {{/case}}
          {{#default()}}
              You do not have permission!
          {{/default}}
        {{/switch}}
      </div>
      <p class="text-center small">Get Suppdort by <a href="#">{{page}}</a></p>
    `
i have it in a var in the same script
we are talking about self containing webcomponent :)
component-report for example renders
when i import that component in the same script
Mohamed Cherif Bouchelaghem
@cherifGsoul
Nov 04 2017 22:21
you can do
<div type="text/stache" id="myTemplate" can-autorender>
   <can-import from="~/application/view.js" export-as="viewModel" />
        <div class="container">
        <h1> Main Application </h1>
        <button on:click="key()">my button</button>
        {{#switch(page)}}
          {{#case("home")}}
              <components-report></components-report>
          {{/case}}
          {{#case("manager")}}
              <button value="view">I am Manager </button>
          {{/case}}
          {{#case("login")}}
              <login-element></login-element>
          {{/case}}
          {{#default()}}
              You do not have permission!
          {{/default}}
        {{/switch}}
      </div>
      <p class="text-center small">Get Suppdort by <a href="#">{{page}}</a></p>
</div>
Frank Lemanschik
@frank-dspeed
Nov 04 2017 22:21
all is well
div ok
Mohamed Cherif Bouchelaghem
@cherifGsoul
Nov 04 2017 22:23
use it inline
Frank Lemanschik
@frank-dspeed
Nov 04 2017 22:23
its all inline
Mohamed Cherif Bouchelaghem
@cherifGsoul
Nov 04 2017 22:25
and to set a viewModel:
var el = document.querySelector('theselector');
var vm = new DefineMap({
// your props
});
domData.set.call(el, "viewModel", vm);
Frank Lemanschik
@frank-dspeed
Nov 04 2017 22:27
hmm putting it into div was not a great idea
i am wondering where my context problems come from :(
why is can-import not registered
Mohamed Cherif Bouchelaghem
@cherifGsoul
Nov 04 2017 22:28
I use it everytime especialy for small widgets with php
Frank Lemanschik
@frank-dspeed
Nov 04 2017 22:28
i am sitting there since 4 days
16 hours a day
trying to find the missing part
domData.set looks great
that solves one big issue
but not the can-import one
it must have something to do with this can-view-callback stuff
i only need to render a stache template with a can define map via javascript and there inside the template
can-import needs to work
i don't know why i don't get this working
i can render stache with a viewModel without problems but the missing part is the integration of can-import
Mohamed Cherif Bouchelaghem
@cherifGsoul
Nov 04 2017 22:32
I have to know your use case exactly a small project in github might help me to help you
Frank Lemanschik
@frank-dspeed
Nov 04 2017 22:33
the problem with that will be the loader and all
yes wait i will setup something
give me a minut
Frank Lemanschik
@frank-dspeed
Nov 04 2017 22:47
here is your repo
i hope you get it done you simply need to use yarn install
after git clone
and http-server
in the same dir
Mohamed Cherif Bouchelaghem
@cherifGsoul
Nov 04 2017 22:48
ok
Frank Lemanschik
@frank-dspeed
Nov 04 2017 22:49
you should run that in chrome
:D
because its using nativ es6 and some other early stage stuff
Mohamed Cherif Bouchelaghem
@cherifGsoul
Nov 04 2017 22:50
ok
can-element dosent do the same thing?
Frank Lemanschik
@frank-dspeed
Nov 04 2017 22:52
nope
i would love if it would
can element don't renders stache template with can-import support
can element acts near same i will verify that now again
Frank Lemanschik
@frank-dspeed
Nov 04 2017 23:04
updated with can-element example + app example
Mohamed Cherif Bouchelaghem
@cherifGsoul
Nov 04 2017 23:04
yes
Frank Lemanschik
@frank-dspeed
Nov 04 2017 23:04
can-element does the same
it don't handels can-import
WAIT
I have it
i only needed to added can-view-import to the element
it looks working let me test more
Mohamed Cherif Bouchelaghem
@cherifGsoul
Nov 04 2017 23:06
ok
Frank Lemanschik
@frank-dspeed
Nov 04 2017 23:17
@cherifGsoul lol i got it working oh my god
Mohamed Cherif Bouchelaghem
@cherifGsoul
Nov 04 2017 23:17
ok cool
Frank Lemanschik
@frank-dspeed
Nov 04 2017 23:17
its not exactly as it should be but at last functional
but i still get the warning that there is no custom-tag defined for component but it works