ionic-team / stencil-component-starter Goto Github PK
View Code? Open in Web Editor NEWMinimal starter project for building shareable web components with Stencil
Home Page: https://github.com/ionic-team/stencil
License: MIT License
Minimal starter project for building shareable web components with Stencil
Home Page: https://github.com/ionic-team/stencil
License: MIT License
Is there possibly a bug(?) in stand-alone stencil components?
Running npm run build -> publishing to npm -> installing to my angular 4 project -> including the script:
Results in 404 not found. The component is looking for the /build/ folder. Which is ofc not in the server root because the component is installed via npm and bundled by webpack as it is included from node_modules.
Something I missed?
Or just not thought out?
Thanks!
When i install my package in an angular project i have see that "@stencil/core" also installed.
why @stencil/core
located in dependencies
object and not in devDependencies
object?
package.json
"dependencies": {
"@stencil/core": "^0.6.18"
},
"devDependencies": {
...
},
should be:
"dependencies": {
...
},
"devDependencies": {
"@stencil/core": "^0.6.18"
},
for avoiding the installation of @stencil/core
and make it pure web-component.
I'm submitting a ... (check one with "x")
[ ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com
Hello, I keep running into this error while running npm install.
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install"
npm ERR! node v6.11.4
npm ERR! npm v3.10.10
npm ERR! path C:\Rehan\Stencil\my-web-component\node_modules.staging@types\node-7a5f5d35
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename 'C:\Rehan\Stencil\my-web-component\node_modules.staging@types\node-7a5f5d35' -> 'C:\Rehan\Stencil\my-web-component\node_modules@stencil\core\node_modules@types\node'
npm ERR! enoent ENOENT: no such file or directory, rename 'C:\Rehan\Stencil\my-web-component\node_modules.staging@types\node-7a5f5d35' -> 'C:\Rehan\Stencil\my-web-component\node_modules@stencil\core\node_modules@types\node'
npm ERR! enoent This is most likely not a problem with npm itself
npm ERR! enoent and is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! Please include the following file with any support request:
npm ERR! C:\Rehan\Stencil\my-web-component\npm-debug.log
Stencil version: (run npm list @stencil/core
from a terminal/cmd prompt and paste output below):
@stencil/[email protected]
I'm submitting a ... (check one with "x")
[ ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com
Current behavior:
Security warnings
Expected behavior:
NO Security warnings
Steps to reproduce:
Related code:
=== npm audit security report ===
Manual Review
Some vulnerabilities require your attention to resolve
Visit https://go.npm.me/audit-guide for additional guidance
Moderate Regular Expression Denial of Service
Package semver
Patched in >=4.3.2
Dependency of @stencil/core [dev]
Path @stencil/core > rollup-plugin-node-builtins > browserify-fs
> levelup > semver
More info https://nodesecurity.io/advisories/31
Moderate Memory Exposure
Package bl
Patched in >=0.9.5 <1.0.0 || >=1.0.1
Dependency of @stencil/core [dev]
Path @stencil/core > rollup-plugin-node-builtins > browserify-fs
> levelup > bl
More info https://nodesecurity.io/advisories/596
found 2 moderate severity vulnerabilities in 2985 scanned packages
2 vulnerabilities require manual review. See the full report for details.
Other information:
Stencil version: (run npm list @stencil/core
from a terminal/cmd prompt and paste output below):
`-- @stencil/[email protected]
I'm submitting a ... (check one with "x")
[X ] bug report
Current behavior:
After fresh install starting the dev server the example component does not render. No errors in the console whatsoever, just IE11 DOM Explorer shows this message (which cannot be c&p'ed):
IE11 DOM Explorer message
Expected behavior:
Expecting the example component to render.
Steps to reproduce:
git clone https://github.com/ionic-team/stencil-starter.git test
cd test
git remote rm origin
npm install
npm run build --prod
npm run serve
Related code:
This is the source generated by npm run build --prod
(unsure if this is helpful):
<!DOCTYPE html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Stencil Component Starter</title> <script data-resources-url="/build/mycomponent/">/*! Built with http://stenciljs.com */
!function(e,t,n,r,o,i,s,c,u,l,m,d){for((e.mycomponent=e.mycomponent||{}).components=u,e.customElements||(e.$whenDefined=[],e.customElements={whenDefined:function(t){return{then:function(n){e.$whenDefined.push([t,n])}}}}),(m=u.filter(function(e){return e[2]}).map(function(e){return e[0]})).length&&((l=t.createElement("style")).innerHTML=m.join()+"{visibility:hidden}.hydrated{visibility:inherit}",l.setAttribute("data-styles",""),t.head.insertBefore(l,t.head.firstChild)),l=(m=t.querySelectorAll("script")).length-1;l>=0&&!(d=m[l]).src&&!d.hasAttribute("data-resources-url");l--);(m=d.getAttribute("data-resources-url"))&&(o=m),!o&&d.src&&(o=(m=d.src.split("/").slice(0,-1)).join("/")+(m.length?"/":"")+"mycomponent/"),l=t.createElement("script"),function(e,t,n,r){return!(t.search.indexOf("core=esm")>0)&&(!(!(t.search.indexOf("core=es5")>0||"file:"===t.protocol)&&e.customElements&&e.customElements.define&&e.fetch&&e.CSS&&e.CSS.supports&&e.CSS.supports("color","var(--c)")&&"noModule"in n)||function(e){try{return new Function('import("")'),!1}catch(e){}return!0}())}(e,e.location,l)?l.src=o+"mycomponent.jpysghnx.js":(l.src=o+"mycomponent.jvyrrdlw.js",l.setAttribute("type","module"),l.setAttribute("crossorigin",!0)),l.setAttribute("data-resources-url",o),l.setAttribute("data-namespace","mycomponent"),t.head.appendChild(l)}(window,document,0,0,0,0,0,0,[],void 0);</script> </head>
<body> <my-component first="Stencil" last="'Don't call me a framework' JS"></my-component> <script>"serviceWorker"in navigator&&"file:"!==location.protocol&&window.addEventListener("load",function(){navigator.serviceWorker.register("/sw.js").then(function(e){console.log("service worker registered",e),e.onupdatefound=function(){var n=e.installing;n.onstatechange=function(){"installed"===n.state&&window.dispatchEvent(new Event("swUpdate"))}}}).catch(function(e){console.log("service worker error",e)})});</script> <script type="text/javascript" src="http://localhost:35729/livereload.js?snipver=1" charset="utf-8"></script>
</body></html>
Other information:
Chrome console shows this:
Chrome with npm run serve
All browsers mentioned are installed with their latest stable version.
node v8.11.1
npm 5.6.0
Fixed in this PR #32
Not a huge deal, but if there was a yeoman generator to spin up a new stencil component template, that would be sweet. That way yeoman can include the correct name of the component throughout the files.
I'm starting a new Stencil Component project on macOS. The tests simply don't run. Here's an example terminal session:
$ npm init stencil
# --- snip ---
✔ Pick a starter › component
✔ Project name › fart
⠸ Preparing starter
✔ All setup in 511 ms
Next steps:
$ cd fart
$ npm start
Further reading:
- https://github.com/ionic-team/stencil-component-starter
$ cd fart
$ npm test
> [email protected] test /Users/james/fart
> stencil test --spec --e2e
[01:11.9] Please wait while required dependencies are installed. This may take a few moments and will only be required for the initial run.
[01:11.9] installing dependencies: @types/jest, jest, jest-cli, @types/puppeteer, puppeteer ...
npm WARN deprecated [email protected]: Please upgrade to kleur@3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).
> [email protected] install /Users/james/fart/node_modules/puppeteer
> node install.js
Downloading Chromium r588429 - 82.7 Mb [====================] 100% 0.0s
Chromium downloaded to /Users/james/fart/node_modules/puppeteer/.local-chromium/mac-588429
npm WARN [email protected] No repository field.
+ @types/[email protected]
+ @types/[email protected]
+ [email protected]
+ [email protected]
+ [email protected]
added 359 packages from 219 contributors in 19.476s
[01:31.9] installing dependencies finished in 20.03 s
[01:32.0] @stencil/core v0.16.2 🐣
[01:32.0] testing e2e and spec files
[01:32.0] build, mycomponent, dev mode, started ...
[01:32.1] transpile started ...
[01:33.2] transpile finished in 1.04 s
[01:33.2] module map started ...
[01:33.2] generate styles started ...
[01:33.5] generate styles finished in 331 ms
[01:33.6] module map finished in 378 ms
[01:33.6] generate bundles started ...
[01:33.6] generate bundles finished in 1 ms
[01:33.6] generate app files started ...
[01:34.2] generate app files finished in 575 ms
[01:34.6] build finished in 2.64 s
At this point nothing happens at all.
Generated package.json
:
{
"name": "fart",
"version": "0.0.1",
"description": "Stencil Component Starter",
"module": "dist/esm/index.js",
"main": "dist/index.js",
"unpkg": "dist/ionic.js",
"types": "dist/types/components.d.ts",
"collection": "dist/collection/collection-manifest.json",
"files": [
"dist/"
],
"scripts": {
"build": "stencil build --docs",
"start": "stencil build --dev --watch --serve",
"test": "stencil test --spec --e2e",
"test.watch": "stencil test --spec --e2e --watchAll"
},
"dependencies": {},
"devDependencies": {
"@stencil/core": "~0.16.2",
"@types/jest": "23.3.14",
"@types/puppeteer": "1.12.2",
"jest": "23.6.0",
"jest-cli": "23.6.0",
"puppeteer": "1.8.0"
},
"license": "MIT"
}
Right now we're using my-web-component
in the README for starter instructions, our component is named my-name
, and our namespace is myname
:
I propose changing everything to just my-component
.
I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com
Current behavior:
It looks like the <script src='node_modules/my-component/dist/mycomponent.js></script>
is missing a '
in the src
.
Stencil is closely related to Ionic. How about some install instructions on how to use a component build on the starter in Ionic?
Stencil version:
`-- @stencil/[email protected]
I'm submitting a ...
[ x ] bug report
Expected behavior:
Render my-component
correctly.
Steps to reproduce:
As follows.
Related code:
D:\study\stencil-demo>npm run dev --prod
> [email protected] dev D:\study\stencil-demo
> sd concurrent "stencil build --dev --watch" "stencil-dev-server"
[27:59.0] @stencil/core v0.9.0
[27:59.0] build, mycomponent, prod mode, started ...
[27:59.0] compile started ...
[28:02.1] compile finished in 3.10 s
[28:02.1] module map started ...
[28:02.3] module map finished in 143 ms
[28:02.5] generate bundles started ...
[28:02.5] generate bundles finished in 6 ms
[28:02.5] generate app files started ...
[28:02.6] generate app files finished in 128 ms
[28:03.4] build finished, watching for changes... in 4.35 s
Stencil version:
@stencil/[email protected]
I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request
[ ] support request
Current behavior:
Initial boot of the my-component
outputs the "Hello, World! I'm Stencil 'Don't call me a framework' JS" just great! Unfortunately every time I modify the my-component.tsx
file (even simply adding a space) gives a blank browser screen and the message:
Uncaught SyntaxError: Unexpected token < :3333/build/mycomponent/undefined:1
Expected behavior:
The output reflects the changes made or at least supplies an error as to why it failed.
Steps to reproduce:
stencil-component-starter
from github (I am behind a firewall that does not allow cloning) and unzip.npm i
npm start
(the initial load works awesome)my-component.tsx
file contents like adding a space and savingRelated code:
// no substantive changes...
Other information:
Verified on two machines so far.
We are super-interested in using this to build free-standing components. It provides the coding patterns we were intending to follow while bridging the shakier parts of Web Components as they are implemented. I work under the assumption I may have messed something up, but this starter kit disagrees with something I am doing. Any help is always appreciated.
Likely related to https://github.com/ionic-team/stencil-app-starter/issues/26
Update: This issue does not exist in @stencil/core v0.0.6
Stencil version:
@stencil/[email protected]
I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request
[ ] support request
Current behavior:
Hi. I've forked the repo and I've added a couple of methods into MyComponent class. The content is irrelevant because its purpose is only to increase the length of the source. Doing so, some lines will be uncovered by the default tests included by the repo.
After that, I've executed tests with coverage flag (jest --coverage). When I review the HTML report generated, the lines highlighted are wrong, because remapping js->ts seems to be incorrect.
Expected behavior:
The couple of methods added should be highlighted as not called methods (uncovered).
Steps to reproduce:
To reproduce the bug you can follow the previous detailed steps or you can clone this branch.
Related code:
Nothing.
Other information:
Other dependency versions:
$> @stencil/[email protected]
$> [email protected]
C:\ae\stencil-component-starter>npm list @stencil/core
[email protected] C:\ae\stencil-component-starter
`-- @stencil/[email protected]
Also here: https://github.com/ionic-team/stencil-app-starter/issues/11
Windows 10
I have just cloned stencil-component-starter and tried to run it in the latest Firefox.
It says This Stencil app is disabled for this browser. and recommends to run npm run dev --es5
. There is no dev
property in the scripts
section of package.json
any more, so that gives npm ERR! missing script: dev
By the looks of it, it has to be npm start --es5
now. I'll open a PR addressing the wrong recommendation in the example HTML.
I would like to debug the stencil component starter code in visual studio code. I tried the following configurations but neither of them work:
"configurations": [
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 3333,
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3333",
"sourceMaps": true,
"webRoot": "${workspaceFolder}"
}
]
The launch version does successfully launch chrome and display the running stencil project, but all the breakpoints in visual studio code say they are 'unverified' thus execution doesn't stop at them. The attached version doesn't work, it gives me a 404 error message saying:
Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: 404 File Not Found
Url: /json
File: C:/work/projectA/www/json).
Hi,
Thank you so much for Stencil!
Now Stencil One is released, you could update the package.json?
I want to show difference theme that according to set difference mode.
so I wirte code that
@Component({
tag: "aui-button",
styleUrls: {
pc: "button.pc.css",
mobile: "button.mobile.css"
},
shadow: true
})
then execute npm run start . in www directory
finally in chrom browser I get error
Thanks for help
Stencil version:
@stencil/[email protected]
I'm submitting a ... (check one with "x")
[x] bug report
Current behavior:
Output from npm install:
> [email protected] install /Users/natel/healthland/stencil-components/node_modules/fsevents
> node install
node-pre-gyp ERR! Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.3/fse-v1.1.3-node-v64-darwin-x64.tar.gz
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v64 ABI, unknown) (falling back to source compile with node-gyp)
node-pre-gyp ERR! Tried to download(undefined): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.3/fse-v1.1.3-node-v64-darwin-x64.tar.gz
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v64 ABI, unknown) (falling back to source compile with node-gyp)
gyp WARN download NVM_NODEJS_ORG_MIRROR is deprecated and will be removed in node-gyp v4, please use NODEJS_ORG_MIRROR
gyp WARN download NVM_NODEJS_ORG_MIRROR is deprecated and will be removed in node-gyp v4, please use NODEJS_ORG_MIRROR
gyp WARN download NVM_NODEJS_ORG_MIRROR is deprecated and will be removed in node-gyp v4, please use NODEJS_ORG_MIRROR
gyp WARN download NVM_NODEJS_ORG_MIRROR is deprecated and will be removed in node-gyp v4, please use NODEJS_ORG_MIRROR
gyp WARN download NVM_NODEJS_ORG_MIRROR is deprecated and will be removed in node-gyp v4, please use NODEJS_ORG_MIRROR
gyp WARN download NVM_NODEJS_ORG_MIRROR is deprecated and will be removed in node-gyp v4, please use NODEJS_ORG_MIRROR
SOLINK_MODULE(target) Release/.node
SOLINK_MODULE(target) Release/.node
CXX(target) Release/obj.target/fse/fsevents.o
CXX(target) Release/obj.target/fse/fsevents.o
In file included from ../fsevents.cc:85:
../src/methods.cc:14:12: warning: 'Call' is deprecated [-Wdeprecated-declarations]
In file included from ../fsevents.cc:85 handler->Call(3, argv);:
^
../src/methods.cc:14:12: ../../nan/nan.h:warning1617: :3: note'Call': is'Call' deprecatedhas [-Wdeprecated-declarations]been
explicitly marked deprecated here
handler->Call(3, argv);
^
NAN_DEPRECATED inline v8::Local<v8::Value>
^
../../nan/nan.h:1617:3:../../nan/nan.h :98:note40: : 'Call' hasnote : been expandedexplicitly frommarked macrodeprecated 'NAN_DEPRECATED'here
NAN_DEPRECATED inline v8::Local<v8::Value># define NAN_DEPRECATED __attribute__((deprecated))
^ ^
../../nan/nan.h:98:40: note: expanded from macro 'NAN_DEPRECATED'
# define NAN_DEPRECATED __attribute__((deprecated))
^
1 warning generated.
1 warning generated.
rm: ./Release/.deps/Release/obj.target/fse/fsevents.o.d.raw: No such file or directory
make: *** [Release/obj.target/fse/fsevents.o] Error 1
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/Users/natel/.nvm/versions/node/v10.4.0/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:258:23)
gyp ERR! stack at ChildProcess.emit (events.js:182:13)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:237:12)
gyp ERR! System Darwin 17.6.0
gyp ERR! command "/Users/natel/.nvm/versions/node/v10.4.0/bin/node" "/Users/natel/.nvm/versions/node/v10.4.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--module=/Users/natel/healthland/stencil-components/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" "--module_name=fse" "--module_path=/Users/natel/healthland/stencil-components/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64"
gyp ERR! cwd /Users/natel/healthland/stencil-components/node_modules/fsevents
gyp ERR! node -v v10.4.0
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok
SOLINK_MODULE(target) Release/fse.node
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute '/Users/natel/.nvm/versions/node/v10.4.0/bin/node /Users/natel/.nvm/versions/node/v10.4.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/Users/natel/healthland/stencil-components/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node --module_name=fse --module_path=/Users/natel/healthland/stencil-components/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64' (1)
node-pre-gyp ERR! stack at ChildProcess.<anonymous> (/Users/natel/healthland/stencil-components/node_modules/fsevents/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack at ChildProcess.emit (events.js:182:13)
node-pre-gyp ERR! stack at maybeClose (internal/child_process.js:961:16)
node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:248:5)
node-pre-gyp ERR! System Darwin 17.6.0
node-pre-gyp ERR! command "/Users/natel/.nvm/versions/node/v10.4.0/bin/node" "/Users/natel/healthland/stencil-components/node_modules/fsevents/node_modules/node-pre-gyp/bin/node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd /Users/natel/healthland/stencil-components/node_modules/fsevents
node-pre-gyp ERR! node -v v10.4.0
node-pre-gyp ERR! node-pre-gyp -v v0.6.39
node-pre-gyp ERR! not ok
Failed to execute '/Users/natel/.nvm/versions/node/v10.4.0/bin/node /Users/natel/.nvm/versions/node/v10.4.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/Users/natel/healthland/stencil-components/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node --module_name=fse --module_path=/Users/natel/healthland/stencil-components/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64' (1)
COPY /Users/natel/healthland/stencil-components/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node
TOUCH Release/obj.target/action_after_build.stampial postinstall 6628
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] install: `node install`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1
added 741 packages from 458 contributors and audited 20780 packages in 14s
found 160 vulnerabilities (44 low, 108 moderate, 8 high)
run `npm audit fix` to fix them, or `npm audit` for details
Expected behavior:
npm install should succeed with exit status 0. The package.json could be updated to specify the supported NPM & node versions.
Steps to reproduce:
Related code:
Other information:
The NPM install works fine if I use node v8.9.4
Stencil version: (run npm list @stencil/core
from a terminal/cmd prompt and paste output below):
➜ npm list @stencil/core
[email protected] /Users/serabe/programming/play/stencil-component-starter
└── @stencil/[email protected]
I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com
Current behavior:
When running tests (npm run test
) a warning about render
and flush
being deprecated is shown.
Expected behavior:
No deprecation by default.
Steps to reproduce:
git clone [email protected]:ionic-team/stencil-component-starter.git my-component
cd my-component
git checkout 0e753321b5ff171b2674e9eaeaa72d9b3337ff54 # Latest commit as of today
npm install
npm run test
➜ npm run test
[email protected] test /Users/serabe/programming/play/stencil-component-starter
jest --no-cachePASS src/components/my-component/my-component.spec.ts
my-component
✓ should build (3ms)
rendering
✓ should work without parameters (828ms)
✓ should work with a first name (8ms)
✓ should work with a last name (5ms)
✓ should work with both a first and a last name (4ms)console.warn node_modules/@stencil/core/dist/testing/index.js:9565
Testing "render()" has been deprecated in favor of using "TestWindow".
Instead of "render(opts)", please use "const window = new TestWindow(); window.load(opts);".
This update allows testing to better simulate the standardized window and document objects.console.warn node_modules/@stencil/core/dist/testing/index.js:9584
Testing "flush()" has been deprecated in favor of using "TestWindow".
Instead of "flush(elm)", please use the TestWindow "flush()" method.
This update allows testing to better simulate the standardized window and document objects.
Test Suites: 1 passed, 1 total
Tests: 5 passed, 5 total
Snapshots: 0 total
Time: 3.089s
Ran all test suites.
Working on a PR.
Stencil version: (run npm list @stencil/core
from a terminal/cmd prompt and paste output below):
@stencil/[email protected]
I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request
[ ] support request
Current behavior:
When opening http://localhost:3333/
in IE11 it is unviewable.
Expected behavior:
Should be able to view the component in supported IE11 to verify look/feel/functionality during development.
Steps to reproduce:
stencil-component-starter
http://localhost:3333/
in IE11Related code:
// No code changes needed
Other information:
I truly apologize for making this ticket but we do have to support IE11 while it slips into irrelevancy...hopefully sooner than later.
Update: This issue does not exist in @stencil/core v0.0.6
Fixed in this PR #21
I'm submitting a ... (check one with "x")
[ ] bug report
[x ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com
Current behavior:
Here: https://github.com/ionic-team/stencil-app-starter/pull/18
I suspect this would also be relevant to the components.
Does it make sense to have something like the app scripts
that keeps these projects in sync?
I'm submitting a ... (check one with "x")
[ ] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com
Current behavior:
Expected behavior:
Steps to reproduce:
Related code:
insert any relevant code here
Other information:
Why are this package using a fixed version of stencil/core package?
I mean, ATM, current stencil/core package in devDependencies is 0.7.7 and stencil is on 0.7.18. Why not use atleast, the latest patch version (^0.7)?
Stencil version:
npm list @stencil/core
I'm submitting a ... (check one with "x")
[X ] bug report
Current behavior:
C:\Users\XXXXXXX\test>npm run dev
[email protected] dev C:\Users\XXXXXXX\test
sd concurrent "stencil build --dev --watch" "stencil-dev-server"
[06:47.6] @stencil/core v0.7.7
[06:47.6] build, mycomponent, dev mode, started ...
[06:47.6] compile started ...
[06:47.6] compile finished in less than 1 ms
[06:47.6] module map started ...
[06:47.7] module map finished in 47 ms
[06:47.7] generate bundles started ...
[06:47.7] generate bundles finished in less than 1 ms
[06:47.7] generate app files started ...
[06:47.7] generate app files started ...
[06:47.7] generate app files finished in 16 ms
[06:47.7] generate app files finished in 16 ms
[ ERROR ] package.json error
package.json "types" file does not exist:
C:\Users\XXXXXXXX\test\dist\types\index.d.ts
[06:47.7] build failed, watching for changes... in 125
ms
Expected behavior:
Start the dev server with no errors.
Steps to reproduce:
git clone https://github.com/ionic-team/stencil-component-starter.git test
cd test
npm run dev
Other information:
Windows 7 Professional 64 Bit, V 6.1.7601 SP 1 Build 7601
node v8.11.1
npm 5.6.0
I think the starter project should come with an editor config. I will be submitting a PR for this.
hi 👋 and thanks for this awesome project!
Stencil makes it easy to unit test your component (...) The testing framework (...) has a minimal API consisting of (...)
render()
andflush()
(ref: https://stenciljs.com/docs/unit-testing)
after reading the Unit Testing doc above, i've been scratching my head trying to figure out where i'm supposed to import those two methods from so that i can call them from within the e2e.test.ts
file that ships with the component starter.
i snooped around looking for reference implementations in core/src/components but i couldn't find anything there either.
if anyone can enlighten me i'd be more than happy to PR a 🍞crumb in the official doc.
Stencil version: (run npm list @stencil/core
from a terminal/cmd prompt and paste output below):
peter@Merry-Christmas MINGW64 /c/ae/aedev/ae-component (master)
$ npm list @stencil/core
[email protected] C:\ae\aedev\ae-component
`-- @stencil/[email protected]
I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com
Current behavior:
Run twice to work
Expected behavior:
Run once to work
Steps to reproduce:
Using git bash
Related code:
insert any relevant code here
Other information:
See #28
Windows 10
Currently there is a build output, the contents of the build directory, committed to the repo. This is unusual, and often represents a missed .gitignore configuration. Are these files present in the source control intentionally? If so, may be explained in the readme? If not, fix?
(I'm happy to do a PR to fix or add an explanation, if pointed as to which one is right here)
Made a PR for this:
#66
Stencil version:
@stencil/[email protected]
I'm submitting a:
[ X] bug report
[ ] feature request
[ ] support request
Current behavior:
Default tests fails with the starter app.
Expected behavior:
Default tests should pass.
Steps to reproduce:
In the terminal run:
npm init stencil # => component
npm test
Related code:
The default code for the default component spec:
import { MyComponent } from './my-component';
describe('my-component', () => {
it('builds', () => {
expect(new MyComponent()).toBeTruthy();
});
describe('formatting', () => {
it('returns empty string for no names defined', () => {
const component = new MyComponent();
// format does not exist on the component...
expect(component.format()).toEqual('');
});
});
});
Other information:
I guess the "format" function was changed to "getText", but was not changed in the tests?
The error logs:
PASS src/components/my-component/my-component.e2e.ts
FAIL src/components/my-component/my-component.spec.ts
● my-component › formatting › returns empty string for no names defined
TypeError: component.format is not a function
9 | it('returns empty string for no names defined', () => {
10 | const component = new MyComponent();
> 11 | expect(component.format()).toEqual('');
| ^
12 | });
13 |
14 | it('formats just first names', () => {
Stencil version: (run npm list @stencil/core
from a terminal/cmd prompt and paste output below):
@stencil/[email protected]
I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com
Current behavior:
Jest testing failing with null errors.
Expected behavior:
Tests function properly.
Steps to reproduce:
stencil-component-starter
npm i
npm test
Related code:
// No changes whatsoever
Other information:
Thanks for all the hard work.
Stencil version: (run npm list @stencil/core
from a terminal/cmd prompt and paste output below):
> npm list @stencil/core
[email protected] C:\projects\stencil\stencil-component-starter
`-- @stencil/[email protected]
I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com
Current behavior:
4 of 5 unit tests fail
Expected behavior:
all tests pass
Steps to reproduce:
npm install
npm test
Other information:
@stencil/core/renderer
return null instead of an element
> node -v
v8.4.0
> npm -v
5.0.3
> npm test
> [email protected] test C:\projects\stencil\stencil-component-starter
> jest --no-cache
FAIL src\components\my-component\my-component.spec.ts
my-component
√ should build (3ms)
rendering
× should work without parameters (1098ms)
× should work with a first name (16ms)
× should work with a last name (14ms)
× should work with both a first and a last name (23ms)
● my-component › rendering › should work without parameters
TypeError: Cannot read property 'textContent' of null
at Object.<anonymous> (src/components/my-component/my-component.spec.ts:66:27)
at Promise (<anonymous>)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
● my-component › rendering › should work with a first name
TypeError: Cannot set property 'first' of null
at Object.<anonymous> (src/components/my-component/my-component.spec.ts:72:39)
at step (src/components/my-component/my-component.spec.ts:32:23)
at Object.next (src/components/my-component/my-component.spec.ts:13:53)
at src/components/my-component/my-component.spec.ts:7:71
at Promise (<anonymous>)
at Object.<anonymous>.__awaiter (src/components/my-component/my-component.spec.ts:3:12)
at Object.<anonymous> (src/components/my-component/my-component.spec.ts:68:66)
at Promise (<anonymous>)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
● my-component › rendering › should work with a last name
TypeError: Cannot set property 'last' of null
at Object.<anonymous> (src/components/my-component/my-component.spec.ts:85:38)
at step (src/components/my-component/my-component.spec.ts:32:23)
at Object.next (src/components/my-component/my-component.spec.ts:13:53)
at src/components/my-component/my-component.spec.ts:7:71
at Promise (<anonymous>)
at Object.<anonymous>.__awaiter (src/components/my-component/my-component.spec.ts:3:12)
at Object.<anonymous> (src/components/my-component/my-component.spec.ts:81:65)
at Promise (<anonymous>)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
● my-component › rendering › should work with both a first and a last name
TypeError: Cannot set property 'first' of null
at Object.<anonymous> (src/components/my-component/my-component.spec.ts:98:39)
at step (src/components/my-component/my-component.spec.ts:32:23)
at Object.next (src/components/my-component/my-component.spec.ts:13:53)
at src/components/my-component/my-component.spec.ts:7:71
at Promise (<anonymous>)
at Object.<anonymous>.__awaiter (src/components/my-component/my-component.spec.ts:3:12)
at Object.<anonymous> (src/components/my-component/my-component.spec.ts:94:82)
at Promise (<anonymous>)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
Test Suites: 1 failed, 1 total
Tests: 4 failed, 1 passed, 5 total
Snapshots: 0 total
Time: 3.32s
Ran all test suites.
Resources:
Before submitting an issue, please consult our docs.
Stencil version: (run npm list @stencil/corerun
npm list @stencil/core` from a terminal/cmd prompt and paste output below):
@stencil/[email protected]
I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com
Current behavior:
The stencil-component-starter creates a index.ts and a index.d.ts.
The issue i found is that the index.ts gets a syntax of
export * from './components';
Rather than the index.d.ts that I think is intended.
When I added the export syntax into the index.d.ts it worked...
Steps to reproduce:
Related code:
git clone https://github.com/ionic-team/stencil-component-starter.git my-component
npm install
npm run dev
ry@X1Carbon:~/my-component$ npm run dev
> [email protected] dev /home/ry/my-component
> sd concurrent "stencil build --dev --watch" "stencil-dev-server"
[55:44.9] @stencil/core v0.0.8-9
[55:44.9] build, mycomponent, dev mode, started ...
[55:44.9] compile started ...
[ ERROR ] tsHost.getSourceFile unable to find /home/ry/my-component/src/index.d.ts
[ ERROR ] tsHost.getSourceFile unable to find /home/ry/my-component/src/index.d.ts
[55:47.8] compile finished in 2.89 s
[ ERROR ] typescript error
File '/home/ry/my-component/src/index.d.ts' not found.
[55:47.9] build failed, watching for changes... in 2.94 s
Other information:
Fixed in #25
Stencil version: (run npm list @stencil/core
from a terminal/cmd prompt and paste output below):
-- @stencil/[email protected]
I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com
Current behavior:
Console error in IE11:
"Unable to get property 'cloneNode' of undefined or null reference 8 MY-COMPONENT"
No SASS styling applied.
Expected behavior:
Error free with styling applied.
Steps to reproduce:
stencil-component-starter
npm i
my-component.scss
file and add some stylingRelated code:
:host {
display: block;
background-color: red;
}
Other information:
I apologize for submitting IE11 issues but hopefully this browser will have a (very) limited lifespan.
Windows 10. Using these commands:
git clone https://github.com/ionic-team/stencil-component-starter.git aestencil
cd aestencil
git remote rm origin
npm install
npm start
Instructions should make Chrome the default?
I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com
my-name is not changed in package-lock.json
Doing a reinstall and it fails.
Possible related to #30 ???
peter@Merry-Christmas MINGW64 /c/ae/ae-stencil-component-starter (master)
$ npm install
npm ERR! Unexpected token < in JSON at position 216316
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\peter\AppData\Roaming\npm-cache\_logs\2017-10-20T05_32_30_804Z-debug.log
peter@Merry-Christmas MINGW64 /c/ae/ae-stencil-component-starter (master)
$ npm list @stencil/core
[email protected] C:\ae\ae-stencil-component-starter
`-- UNMET DEPENDENCY @stencil/core@next
peter@Merry-Christmas MINGW64 /c/ae/ae-stencil-component-starter (master)
$ npm -v
5.3.0
peter@Merry-Christmas MINGW64 /c/ae/ae-stencil-component-starter (master)
$ node -v
v8.6.0
$ npm list @stencil/core
[email protected] C:\ae\ae-stencil-component-starter
`-- @stencil/[email protected]
I'm submitting a ... (check one with "x")
[ ] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com
Current behavior:
The system creates one bundle.
I would like to build multiple components without needing different
projects with constant editing just for setup.
There is no current scaffolding for this and I am working
toward that.
Ref: #5
It is not clear if Ionic want to use Yeoman, a stencil CLI tool, or something else.
Does the system actually do this and I do not know?
Is there some guidance?
What is the future plan?
I could run a bunch of sed scripts on my current sandbox
but that only works for my case.
Steps to reproduce:
Demo here:
https://github.com/adaept/ae-stencil-component-starter/tree/aedev
peter@Merry-Christmas MINGW64 /c/ae/ae-stencil-component-starter (aedev)
$ npm test
> [email protected] test C:\ae\ae-stencil-component-starter
> jest --no-cache
PASS src\components\ion-my-name\ion-my-name.spec.ts
PASS src\components\my-name\my-name.spec.ts
PASS src\components\ae-stencil-menu\ae-stencil-menu.spec.ts
Test Suites: 3 passed, 3 total
Tests: 15 passed, 15 total
Snapshots: 0 total
Time: 4.338s
Ran all test suites.
Stencil / Ionic version:
@stencil/core@<1.0.0-beta.5>
@ionic/[email protected]
I'm submitting a:
[X] bug report
Current behavior:
The is no loader
folder inside the dist
folder.
Expected behavior:
I would expect the loader
folder to be inside the dist
folder, so I could use Stencil web components inside an Ionic project.
Steps to reproduce:
mkdir myIonicProject
cd myIonicProject
ionic start
? Project name: myIonicProjectName
? Starter template: blank
cd ../..
mkdir mystencilprojectname
cd mystencilprojectname
npm init stencil
✔ Pick a starter › component
✔ Project name › myStencilProjectName
npm run build
This is what I get from Stencil:
Shouldn't the loader
folder be inside the dist
folder?
From @Hotell on October 4, 2017 22:51
Stencil version: (run npm list @stencil/core
from a terminal/cmd prompt and paste output below):
@stencil/[email protected]
I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com
Current behavior:
according to docs when building components for npm publishing stencil build
should provide
"main": "dist/collection/index.js",
"types": "dist/collection/index.d.ts",
"collection": "dist/collection/collection-manifest.json",
Expected behavior:
either update docs or this is a bug within stencil compiler
Steps to reproduce:
stencil build
Related code:
stencil.config.js
exports.config = {
namespace: 'myname',
generateDistribution: true,
bundles: [
{ components: ['my-name'] }
]
};
exports.devServer = {
root: 'www',
watchGlob: '**/**'
}
Copied from original issue: ionic-team/stencil#208
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.