stencil-community / stencil-app-starter Goto Github PK

View Code? Open in Web Editor NEW

320.0 31.0 102.0 461 KB

Minimal starter project for building web components with Stencil

Home Page: https://github.com/ionic-team/stencil

License: MIT License

CSS 14.99% TypeScript 73.72% HTML 11.29%

stenciljs

stencil-app-starter's Introduction

Stencil App Starter

Stencil is a compiler for building fast web apps using Web Components.

Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.

Stencil components are just Web Components, so they work in any major framework or with no framework at all. In many cases, Stencil can be used as a drop in replacement for traditional frontend frameworks given the capabilities now available in the browser, though using it as such is certainly not required.

Stencil also enables a number of key capabilities on top of Web Components, in particular Server Side Rendering (SSR) without the need to run a headless browser, pre-rendering, and objects-as-properties (instead of just strings).

Getting Started

To start a new project using Stencil, clone this repo to a new directory:

npm init stencil app

and run:

npm start

To build the app for production, run:

npm run build

To run the unit tests once, run:

npm test

To run the unit tests and watch for file changes during development, run:

npm run test.watch

stencil-app-starter's People

Contributors

Stargazers

Watchers

Forkers

jgw96 andrewharry pisix luishmcmoreno zoosky junydania mrgoogol psyrendust sdmichelini castle-dev umarmughal appdirectory duluca peterennis nalmgren robbear elebetsamer ifyoumakeit saurindashadia hotell unavailable-username marinho romulocintra slav-dachev-epam d2s jasonprogrammer jumpalottahigh bholben jerry119 xiphe sportsbitenews shasthojoy digutil bitflower shafeef901 liquoriceboy arjunyel corysmc iamsingularity sebdelsab humblebountyhunter simonmika shawntalbert joestrouth1 ni-ka thedeadofblackfire bclonan itsdineth serabe qballer davidfrahm elylucas lopes-e-teixeira mkloeppner appology prodrammer amsdams yerfinojul jesusgoku yamahah gireeshkumar stoute maartun tohmail1 tchon jajaperson yehudamakarov jarrvis tm-3 eeevvaaa martineboh soniankur juanbuys sajtempler aryaroudi tanxinpei98 nkolba schellinger paraboly ranjeetsinghbnl aquilaafuadajo readcast mdresch whogonestopme662901 0xblockchainx0 jharrilim titimoby soltrinox ob1sanchez phhbr isabella232 valadas david-poindexter tebellox tag-nalkan jopek hikumealan btaillon-coveo npmirajkar christian-bromann

stencil-app-starter's Issues

npm start fails out of the gate

Resources:
Before submitting an issue, please consult our docs.

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

npm list @stencil/core
@stencil/[email protected] /Users/Erik/code/eriklharper/stencil-app-starter
└── @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:
git clone stencil-app-starter, run npm install and npm start results in build failed errors (see below)

Expected behavior:
No build errors

Steps to reproduce:
git clone stencil-app-starter, run npm install and npm start results in build failed errors (see below)

Related code:

npm start

> @stencil/[email protected] start /Users/Erik/code/eriklharper/stencil-app-starter
> npm run dev


> @stencil/[email protected] dev /Users/Erik/code/eriklharper/stencil-app-starter
> sd concurrent "stencil build --dev --watch" "stencil-dev-server"

[57:30.6]  @stencil/core v0.7.26 👻
[57:30.6]  build, app, dev mode, started ...
[57:30.6]  compile started ...
[57:36.6]  compile finished in 5.99 s

[ ERROR ]  typescript: node_modules/@types/node/index.d.ts, line: 2381
           Duplicate identifier 'URL'.

   L2380:      values(): IterableIterator<string>;
   L2381:      [Symbol.iterator](): IterableIterator<[string, string]>;

[ ERROR ]  typescript: node_modules/@types/node/index.d.ts, line: 2399
           Duplicate identifier 'URLSearchParams'.

   L2399:      export interface LookupOneOptions extends LookupOptions {
   L2400:          all?: false;

[ ERROR ]  typescript: node_modules/@types/node/index.d.ts, line: 2417
           Cannot export 'URL'. Only local declarations can be exported from a module.

   L2416:      export function lookup(hostname: string, callback: (err: NodeJS.ErrnoException, address: string, family: number) => void): void;
   L2418:      // NOTE: This namespace provides design-time support for util.promisify. Exported members do not exist at runtime.

[ ERROR ]  typescript: node_modules/@types/node/index.d.ts, line: 2417
           Cannot export 'URLSearchParams'. Only local declarations can be exported from a module.

   L2416:      export function lookup(hostname: string, callback: (err: NodeJS.ErrnoException, address: string, family: number) => void): void;
   L2418:      // NOTE: This namespace provides design-time support for util.promisify. Exported members do not exist at runtime.

[ ERROR ]  typescript: node_modules/typescript/lib/lib.dom.d.ts, line: 13401
           Duplicate identifier 'URL'.

  L13400:  interface URLSearchParams {
  L13402:       * Appends a specified key/value pair as a new search parameter.

[ ERROR ]  typescript: node_modules/typescript/lib/lib.dom.d.ts, line: 13424
           Duplicate identifier 'URLSearchParams'.

  L13424:      set(name: string, value: string): void;

[57:36.6]  build failed, watching for changes... in 6.01 s

Running:
node v8.10.0
npm v5.6.0

Build fails with errors

Resources:
Before submitting an issue, please consult our docs.

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

@stencil/[email protected]
OR
@stencil/[email protected]

Node: 8.11.1

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:

yarn start works as expected.
yarn build throws errors:

[ ERROR ]  No registered components found: App at new Renderer
           (/Users/aaron/sourcecode/test/my-app/node_modules/@stencil/core/dist/compiler/index.js:13549:19) at
           /Users/aaron/sourcecode/test/my-app/node_modules/@stencil/core/dist/compiler/index.js:13623:30 at
           Generator.next (<anonymous>) at
           /Users/aaron/sourcecode/test/my-app/node_modules/@stencil/core/dist/compiler/index.js:13603:71 at new
           Promise (<anonymous>) at __awaiter$38
           (/Users/aaron/sourcecode/test/my-app/node_modules/@stencil/core/dist/compiler/index.js:13599:12) at
           prerenderPath
           (/Users/aaron/sourcecode/test/my-app/node_modules/@stencil/core/dist/compiler/index.js:13607:12) at
           /Users/aaron/sourcecode/test/my-app/node_modules/@stencil/core/dist/compiler/index.js:13753:35 at
           Generator.next (<anonymous>) at
           /Users/aaron/sourcecode/test/my-app/node_modules/@stencil/core/dist/compiler/index.js:13645:71

[ ERROR ]  TypeError: Parameter "url" must be a string, not undefined at Url.parse (url.js:103:11) at Object.urlParse
           [as parse] (url.js:97:13) at getWritePathFromUrl
           (/Users/aaron/sourcecode/test/my-app/node_modules/@stencil/core/dist/compiler/index.js:8991:38) at
           /Users/aaron/sourcecode/test/my-app/node_modules/@stencil/core/dist/compiler/index.js:13775:26 at
           Generator.next (<anonymous>) at
           /Users/aaron/sourcecode/test/my-app/node_modules/@stencil/core/dist/compiler/index.js:13645:71 at new
           Promise (<anonymous>) at __awaiter$39
           (/Users/aaron/sourcecode/test/my-app/node_modules/@stencil/core/dist/compiler/index.js:13641:12) at
           writePrerenderDest
           (/Users/aaron/sourcecode/test/my-app/node_modules/@stencil/core/dist/compiler/index.js:13773:12) at
           /Users/aaron/sourcecode/test/my-app/node_modules/@stencil/core/dist/compiler/index.js:13759:19

[ ERROR ]  TypeError: Cannot read property 'forEach' of undefined at addStyles
           (/Users/aaron/sourcecode/test/my-app/node_modules/@stencil/core/dist/compiler/index.js:3443:30) at
           generateHostRuleHeaders
           (/Users/aaron/sourcecode/test/my-app/node_modules/@stencil/core/dist/compiler/index.js:3369:5) at
           generateHostRule
           (/Users/aaron/sourcecode/test/my-app/node_modules/@stencil/core/dist/compiler/index.js:3360:18) at
           hydrateResultss.forEach.hydrateResults
           (/Users/aaron/sourcecode/test/my-app/node_modules/@stencil/core/dist/compiler/index.js:3346:30) at
           Array.forEach (<anonymous>) at
           /Users/aaron/sourcecode/test/my-app/node_modules/@stencil/core/dist/compiler/index.js:3345:25 at
           Generator.next (<anonymous>) at
           /Users/aaron/sourcecode/test/my-app/node_modules/@stencil/core/dist/compiler/index.js:3328:71 at new Promise
           (<anonymous>) at __awaiter$13
           (/Users/aaron/sourcecode/test/my-app/node_modules/@stencil/core/dist/compiler/index.js:3324:12)

Expected behavior:

Should run yarn build correctly.

Steps to reproduce:

Clone project
run yarn
run yarn build

Other information:

`npm run test` fails to run

Resources:

Testing Stencil with Jest (from the official documentation).

Stencil version: (npm list @stencil/core output below):

@stencil/[email protected] /[… filesystem path removed …]/GitHub/ionic-team/stencil-app-starter
└── @stencil/[email protected]

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request

Current behavior:

Tests fail to run by default, when running npm run test command.

Expected behavior:

Default tests should run without errors.

Steps to reproduce:

Clone repository at the latest commit: https://github.com/ionic-team/stencil-app-starter/tree/3513e490b8c0f93b8b5a84e08499d56f44b715f0 (at the moment of writing).
Open project’s directory with CLI.
Run tests with: npm run test
See the error messages.

Related code:

npm run test

> @stencil/[email protected] test /[… filesystem path removed …]/GitHub/ionic-team/stencil-app-starter
> jest --no-cache

 FAIL  src/components/my-name/my-name.spec.ts
  ● Test suite failed to run

    ReferenceError: expect is not defined

      at Object.<anonymous> (node_modules/@stencil/core/testing/index.js:4669:1)
      at Module._compile (module.js:635:30)
      at Object.Module._extensions..js (module.js:646:10)
      at Module.load (module.js:554:32)
      at tryModuleLoad (module.js:497:12)
      at Function.Module._load (module.js:489:3)
      at Module.require (module.js:579:17)
      at require (internal/module.js:11:18)
      at Object.<anonymous> (node_modules/@stencil/core/testing/jest.preprocessor.js:3:15)
      at Module._compile (module.js:635:30)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.122s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @stencil/[email protected] test: `jest --no-cache`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @stencil/[email protected] test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/d2s/.npm/_logs/2017-11-09T14_45_21_323Z-debug.log

Other information:

Using latest Node.js LTS version (via nvm, installed with the instructions available at a Gist page). Computer itself is running a recent version of macOS.

❯ nvm ls
->       v8.9.0

❯ node --version
v8.9.0

❯ npm --version
5.5.1

Out of the box compile error

Resources:
Before submitting an issue, please consult our docs.

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):
0.9.4

 insert the output from npm list @stencil/core here

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:

There is a compile error from a fresh clone/npm install of the starter app project
The error is:

[ ERROR ]  typescript: node_modules/@stencil/core/dist/declarations/component.d.ts, line: 192
           Interface 'HostElement' incorrectly extends interface 'HTMLElement'. Types of property 'componentOnReady'
           are incompatible. Type '() => Promise<HostElement>' is not assignable to type '() => Promise<this>'. Type
           'Promise<HostElement>' is not assignable to type 'Promise<this>'. Type 'HostElement' is not assignable to
           type 'this'.

    L192:  export interface HostElement extends HTMLElement {
    L193:      connectedCallback?: () => void;

Expected behavior:

App should compile successfully and launch in the browser
Steps to reproduce:

Do a fresh git clone, npm install, and run npm start
Related code:

insert any relevant code here

Other information:

Upgrading to stencil 0.9.7 fixes the issue, i will submit a PR to upgrade the starter-app to 0.9.7 and attach this issue to it

Prerendering not working

With @stencil/[email protected] running

 stencil build --prerender

gives the following error:

[ ERROR ]  TypeError [ERR_INVALID_ARG_TYPE]: The "url" argument must be of type string. Received type undefined at
           Url.parse (url.js:152:11) at Object.urlParse [as parse] (url.js:146:13) at getWritePathFromUrl
           (C:\Users\borto\Documents\GitHub\blog-pwa-example\node_modules\@stencil\core\dist\compiler\index.js:8936:38)
           at
           C:\Users\borto\Documents\GitHub\blog-pwa-example\node_modules\@stencil\core\dist\compiler\index.js:15262:26
           at Generator.next (<anonymous>) at
           C:\Users\borto\Documents\GitHub\blog-pwa-example\node_modules\@stencil\core\dist\compiler\index.js:32:71 at
           new Promise (<anonymous>) at __awaiter
           (C:\Users\borto\Documents\GitHub\blog-pwa-example\node_modules\@stencil\core\dist\compiler\index.js:28:12)
           at writePrerenderDest
           (C:\Users\borto\Documents\GitHub\blog-pwa-example\node_modules\@stencil\core\dist\compiler\index.js:15260:12)
           at
           C:\Users\borto\Documents\GitHub\blog-pwa-example\node_modules\@stencil\core\dist\compiler\index.js:15246:19

[ ERROR ]  evalmachine.<anonymous>:4 })(x,r); ^ ReferenceError: x is not defined at evalmachine.<anonymous>:4:4 at
           evalmachine.<anonymous>:5:3 at Script.runInContext (vm.js:107:20) at Object.runInContext (vm.js:285:6) at
           Object.runInContext
           (C:\Users\borto\Documents\GitHub\blog-pwa-example\node_modules\@stencil\core\dist\sys\node\index.js:1:13735)
           at runGlobalScripts
           (C:\Users\borto\Documents\GitHub\blog-pwa-example\node_modules\@stencil\core\dist\compiler\index.js:13557:23)
           at createPlatformServer
           (C:\Users\borto\Documents\GitHub\blog-pwa-example\node_modules\@stencil\core\dist\compiler\index.js:13360:5)
           at resolve
           (C:\Users\borto\Documents\GitHub\blog-pwa-example\node_modules\@stencil\core\dist\compiler\index.js:13639:21)
           at new Promise (<anonymous>) at hydrateHtml
           (C:\Users\borto\Documents\GitHub\blog-pwa-example\node_modules\@stencil\core\dist\compiler\index.js:13622:12)

test.watch - Error: This promise must be present when running with -o

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

@stencil/[email protected]

Current behavior:
Cannot execute npm run test.watch

Expected behavior:
The ability to develop via TDD

Steps to reproduce:

Clone the stencil-app-starter repo
Run npm i
Run npm run test.watch

Related code:

// nothing new

Other information:

Just trying to get started in TDD and hit this wall. 😞
This same problem is affecting the stencil-component-starter as well.

Component tag "my-name" is defined in a bundle but no matching component was found with this tag within this project or its collections.

build, dev mode, started ...
[21:25:29]  compile started ...
[21:25:30]  compile finished in 479 ms
[21:25:30]  bundle started ...
[21:25:30]  bundle styles started ...
[21:25:30]  bundle modules started ...
[21:25:30]  bundle styles finished in 291 ms
[21:25:30]  bundle modules finished in 318 ms
[21:25:30]  bundle, done in 321 ms
[ ERROR  ]  Component tag "my-name" is defined in a bundle but no matching
            component was found with this tag within this project or its
            collections.
[ ERROR  ]  Unable to find component "my-name" in available config and
            collection.
[ WARN   ]  Generated an empty bundle
[21:25:30]  build ready, watching files... in 865 ms

tsconfig improvements

there are few redundancies within tsconfig.

Also I suggest adding strict:true

I can send PR if you're ok with that :)

ES5 build doesn't work on IE11: attachShadow not supported

After setting the buildEs5 config's property either to true or to prod and executing either npm start or npm run build, the www output target does not work on IE11. It prints: Object doesn't support property or method 'attachShadow'

I opened this issue also in the Stencil repo as I was not sure which repo is the right one.

Test Issue 1

Test Issue 2

Terminate batch job exits with n or N

The system also shows multiple prompts when using Ctrl-C

add tslint, prettier, lint-staged for complete "tooling package"

It would be nice to follow best practices from js and ts programming paradigm, which could be enforced by providing tslint.

also united formatting and automatically handling all in pre commit hooks via lint-staged is very good idea and DX IMHO

I can submit all of these via PR if you're ok with that :)

New install renders blank screen

Following stencil-app starter installation instructions, I get a blank screen rendered.

Step 1.
npm init stencil app

Step 2.
npm start

System Versions:

Windows 10
Chrome: 72.0.3626.121 (Official Build) (64-bit)
"@stencil/core": "0.18.1",
"@stencil/router": "^0.3.3"

Terminal Window Output:

C:\Users\ghadd\stencilProjects\stencilapp>npm run start

[email protected] start C:\Users\ghadd\stencilProjects\stencilapp
stencil build --dev --watch --serve

[44:43.3] @stencil/core v0.18.1
[44:43.4] build, app, dev mode, started ...
[44:43.4] transpile started ...
[44:43.5] transpile finished in 41 ms
[44:43.6] module map started ...
[44:43.6] generate styles started ...
[44:43.7] compile global style start ...
[44:43.7] compile global style finish in 3 ms
[44:43.7] generate styles finished in 42 ms
[44:45.0] module map finished in 1.39 s
[44:45.0] generate bundles started ...
[44:45.0] generate bundles finished in 4 ms
[44:45.0] generate app files started ...
[44:45.1] generate app files finished in 36 ms

[ WARN ] Bundling Warning
Generated an empty bundle

[44:46.4] dev server: http://localhost:3333/
[44:46.4] build finished, watching for changes... in 2.99 s

Chrome Browser Output:
app.core.js:1510 SyntaxError: Identifier 'h' has already been declared "http://localhost:3333/build/app/app-root.entry.js"
then.err @ app.core.js:1510

Confused about getting started instructions

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

$ npm list @stencil/core
@stencil/[email protected] C:\code\sandbox\my-app
`-- @stencil/[email protected]

I'm submitting a ... (check one with "x")
[x ] bug report

Current behavior:
npm test fails with

● app-profile › rendering › should not render any content if there is not a match

1 test suite with 5 tests took 5.755secs to complete.

Test Suites: 1 failed, 2 passed, 3 total
Tests: 2 failed, 3 passed, 5 total
Snapshots: 0 total
Time: 5.755s
Ran all test suites.

The instructions at https://stenciljs.com/docs/getting-started refer to files that do not exist in the starter repo.

Open src/components/my-name/my-name.tsx in your editor

Expected behavior:
All tests are expected pass.
Tests suite is expected to take much less time.
The files mentioned in the instructions are expected to be in the starter repo

Steps to reproduce:
Follow the instructions on https://stenciljs.com/docs/getting-started

Getting error stating that request module is not installed.

Creating this issue to partially resolve #56, specifically:

[ ERROR ]  Cannot find module 'request' at Function.Module._resolveFilename
           (module.js:547:15) at Function.Module._load (module.js:474:25) at
           Module.require (module.js:596:17) at require
           (internal/module.js:11:18) at
           C:\ae\my-app\node_modules\request-promise-native\lib\rp.js:8:12 at
           module.exports
           (C:\ae\my-app\node_modules\stealthy-require\lib\index.js:62:23) at
           Object.<anonymous>
           (C:\ae\my-app\node_modules\request-promise-native\lib\rp.js:7:15) at
           Module._compile (module.js:652:30) at Object.Module._extensions..js
           (module.js:663:10) at Module.load (module.js:565:32)

Fail to start with Stencil 0.11.0

@adamdbradley

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

@stencil/core v0.11.0

Current behavior:

$ cd /c/ae

peterennis@EINSTEINIUM MINGW64 /c/ae
$ git clone https://github.com/ionic-team/stencil-starter.git my-app
Cloning into 'my-app'...
remote: Counting objects: 374, done.
remote: Compressing objects: 100% (33/33), done.
remote: Total 374 (delta 25), reused 40 (delta 20), pack-reused 321
Receiving objects: 100% (374/374), 404.13 KiB | 4.44 MiB/s, done.
Resolving deltas: 100% (191/191), done.

peterennis@EINSTEINIUM MINGW64 /c/ae
$ cd my-app

peterennis@EINSTEINIUM MINGW64 /c/ae/my-app (master)
$ git remote rm origin

peterennis@EINSTEINIUM MINGW64 /c/ae/my-app (master)
$ npm i
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\sane\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 762 packages from 460 contributors and audited 24968 packages in 17.112s
found 366 vulnerabilities (361 low, 5 high)
  run `npm audit fix` to fix them, or `npm audit` for details

peterennis@EINSTEINIUM MINGW64 /c/ae/my-app (master)
$ npm start

> @stencil/[email protected] start C:\ae\my-app
> stencil build --dev --watch --serve

[04:13.7]  @stencil/core v0.11.0
[04:14.5]  build, app, dev mode, started ...
[04:14.5]  transpile started ...
[04:15.5]  transpile finished in 969 ms
[04:15.6]  module map started ...
[04:15.6]  generate styles started ...
[04:15.7]  compile global style start ...
[04:15.9]  compile global style finish in 124 ms
[04:15.9]  generate styles finished in 281 ms
[04:16.1]  module map finished in 510 ms
[04:16.1]  generate bundles started ...
[04:16.1]  generate bundles finished in 5 ms
[04:16.1]  generate app files started ...
[04:17.2]  generate app files finished in 1.10 s

[ ERROR ]  Cannot find module 'request' at Function.Module._resolveFilename
           (module.js:547:15) at Function.Module._load (module.js:474:25) at
           Module.require (module.js:596:17) at require
           (internal/module.js:11:18) at
           C:\ae\my-app\node_modules\request-promise-native\lib\rp.js:8:12 at
           module.exports
           (C:\ae\my-app\node_modules\stealthy-require\lib\index.js:62:23) at
           Object.<anonymous>
           (C:\ae\my-app\node_modules\request-promise-native\lib\rp.js:7:15) at
           Module._compile (module.js:652:30) at Object.Module._extensions..js
           (module.js:663:10) at Module.load (module.js:565:32)

[04:17.2]  dev server: http://localhost:3333/

Expected behavior:
It should work

Steps to reproduce:

Follow the readme instructions.

Other information:
Related: ionic-team/create-stencil#8

npm start fails on fresh setup

Stencil version:

@stencil/[email protected] /Users/cburleson/repos/cburleson-platform
└── @stencil/[email protected]

I'm submitting a ... (check one with "x")
[ X] bug report

Current behavior:

On a fresh setup of the Stencil App Starter on Mac, I'm getting the following error on npm start (whether with node 8,9, or 10)...

[ ERROR ]  Cannot find module 'resolve' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:571:15) at
           Function.Module._load (internal/modules/cjs/loader.js:497:25) at Module.require
           (internal/modules/cjs/loader.js:626:17) at require (internal/modules/cjs/helpers.js:20:18) at
           Object.<anonymous>
           (/Users/cburleson/repos/cburleson-platform/node_modules/@stencil/core/node_modules/rollup-plugin-commonjs/dist/rollup-plugin-commonjs.cjs.js:10:15)
           at Module._compile (internal/modules/cjs/loader.js:678:30) at Object.Module._extensions..js
           (internal/modules/cjs/loader.js:689:10) at Module.load (internal/modules/cjs/loader.js:589:32) at
           tryModuleLoad (internal/modules/cjs/loader.js:528:12) at Function.Module._load
           (internal/modules/cjs/loader.js:520:3)

Expected behavior:

I expect the build to complete and the starter web app to load in my browser,

Add editorconfig

I think the starter project should come with an .editorconfig. I will be submitting a PR for this.

integrating @ionic/core?

what is the correct version of @ionic/core to use with stencil starter?

Does not run on latest LTS

Issue

When testing out this app with node v6.11.2, the build fails with an error message stating that you need the latest LTS version.

Resolution

This is only resolved by installing the current version.

Build Error EEXIST: file already exists, copyfile icon.png

Fresh build using stencil init and choosing app starter option. Build runs first time... subsequent start or build fails with this error.

Completely unusable.

Build fails with errors "TypeError: Cannot read property 'toString' of undefined "

When i run npm run build i have get this error.

TypeError: Cannot read property 'toString' of undefined at e.getRenderedHash (/home/ubuntu/Vue/my-stencil-app/node_modules/@stencil/core/dist/sys/node/index.js:1:324262) at /home/ubuntu/Vue/my-stencil-app/node_modules/@stencil/core/dist/sys/node/index.js:1:325017
Can you help me on this!?

Problems with 'npm install'

Resources:
Before submitting an issue, please consult our docs.

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:
Running npm install after cloning this starter project fails on Node 9.3.0 and 9.4.0 on MacOS unless the package nan is installed globally (this in turn is needed to build fs-events).

After calling 'npm install -g nan', npm install works on Node 9.3.0 but not on 9.4.0. On 9.4.0 installing 'nan' globally has no effect.

Expected behavior:
npm install should succeed without requiring the installation of global NPM packages unless noted in the "Get Started" section.

Steps to reproduce:
On macOS High Sierra with node 9.3.0 installed (I use nodenv to select different node versions), follow the steps from your "Get Started" documentation (clone the repo, cd into it, run npm install).

Related code:

(none)

Other information:

depending on an uglify-es that doesn't exist?

npm install @stencil/core

npm ERR! code ETARGET
npm ERR! notarget No matching version found for [email protected]
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget 
npm ERR! notarget It was specified as a dependency of @stencil/core
npm ERR! notarget 

npm ERR! A complete log of this run can be found in:

running `npm list @stencil/core` gives unexpected result

Tested on Ubuntu 17.10.1 / zsh

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

@stencil/[email protected] /home/connexo/Sites/my-app
└── (empty)

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:
See above.

Expected behavior:
Outputs the version of stencil being used based on package.json.

Steps to reproduce:
Follow the readme-md's instruction on cloning, npm installling and starting the app starter.

Related code:
✘ connexo@connexo-HP-ZBook-15  ~/Sites/my-app   master ●  npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

up to date in 3.799s
connexo@connexo-HP-ZBook-15 > ~~/Sites/my-app - master ● > npm list @stencil/core~~
@stencil/[email protected] /home/connexo/Sites/my-app
└── (empty)

✘ connexo@connexo-HP-ZBook-15 > ~/Sites/my-app - master ● > cat package.json|grep @Stencil
"name": "@stencil/starter",
"@stencil/core": "^0.7.22",
"@stencil/router": "latest"
"@stencil/dev-server": "latest",
"@stencil/utils": "latest",
"^.+\.(ts|tsx)$": "/node_modules/@stencil/core/testing/jest.preprocessor.js"

Tests fail on fresh clone

Resources:
Before submitting an issue, please consult our docs.

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:
npm run test fails off of fresh clone.

Expected behavior:
tests should pass

Steps to reproduce:
clone latest, npm install, npm run test

Code

$ npm run test

> @stencil/[email protected] test ****************/stencil-app-starter
> jest --no-cache

 PASS  src/components/app-home/app-home.spec.ts
 FAIL  src/components/app-profile/app-profile.spec.ts
  ● app-profile › rendering › should not render any content if there is not a match

    No registered components found

      at Object.<anonymous> (node_modules/@stencil/core/testing/index.js:3764:31)
      at step (node_modules/@stencil/core/testing/index.js:3725:23)
      at Object.next (node_modules/@stencil/core/testing/index.js:3706:53)
      at fulfilled (node_modules/@stencil/core/testing/index.js:3697:58)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

  ● app-profile › rendering › should not render any content if there is not a match

    TypeError: Cannot read property '__testPlatform' of undefined

      at node_modules/@stencil/core/testing/index.js:3778:24
          at new Promise (<anonymous>)
      at Object.flush (node_modules/@stencil/core/testing/index.js:3777:12)
      at Object.<anonymous> (src/components/app-profile/app-profile.spec.ts:68:60)
      at step (src/components/app-profile/app-profile.spec.ts:32:23)
      at Object.next (src/components/app-profile/app-profile.spec.ts:13:53)
      at src/components/app-profile/app-profile.spec.ts:7:71
          at new Promise (<anonymous>)
      at Object.<anonymous>.__awaiter (src/components/app-profile/app-profile.spec.ts:3:12)
      at Object.<anonymous> (src/components/app-profile/app-profile.spec.ts:65:90)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

  ● app-profile › rendering › should work with a name passed

    No registered components found

      at Object.<anonymous> (node_modules/@stencil/core/testing/index.js:3764:31)
      at step (node_modules/@stencil/core/testing/index.js:3725:23)
      at Object.next (node_modules/@stencil/core/testing/index.js:3706:53)
      at fulfilled (node_modules/@stencil/core/testing/index.js:3697:58)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

  ● app-profile › rendering › should work with a name passed

    TypeError: Cannot set property 'match' of undefined

      at Object.<anonymous> (src/components/app-profile/app-profile.spec.ts:80:39)
      at step (src/components/app-profile/app-profile.spec.ts:32:23)
      at Object.next (src/components/app-profile/app-profile.spec.ts:13:53)
      at src/components/app-profile/app-profile.spec.ts:7:71
          at new Promise (<anonymous>)
      at Object.<anonymous>.__awaiter (src/components/app-profile/app-profile.spec.ts:3:12)
      at Object.<anonymous> (src/components/app-profile/app-profile.spec.ts:76:67)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

Other information:
Can't tell if this is an issue with the starter or stencil itself. I have a separate project based on this start kit which last passed successfully 4 days ago, but is not failing in the same manner so I imagine something has changed upstream but I can't parse it from the docs.

my-name vs. my-component

@mlynch, stencil-component-starter made the change to use my-component instead of my-name.
ionic-team/stencil-component-starter@5bfa95a
It would then seem to make more sense for stencil-app-starter to use my-app-name (or my-appname) instead of my-name.

npm start 。。。 error

From @lei1996 on April 13, 2018 11:47

Browser
{
"error": {
"errno": -2,
"code": "ENOENT",
"syscall": "stat",
"path": "/Users/lin/project/test/stencil-starter/www"
}
}

Stencil version:

 @stencil/core@<version>
```@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:**
<!-- Describe how the bug manifests. -->

**Expected behavior:**
<!-- Describe what the behavior would be without the bug. -->

**Steps to reproduce:**
<!-- If you are able to illustrate the bug or feature request with an example, please provide steps to reproduce and if possible a demo
-->

**Related code:**

```tsx
// insert any relevant code here

Other information:

Copied from original issue: ionic-team/stencil#731

Tried to add <ion-tabs> in a bottom <ion-toolbar> but it's not showing up

Hi,

I just started playing around with Stencil and this app-starter. At first it seemed to me like all the Ionic framework components are already available -- but when I tried <ion-tabs><ion-tab> etc. pp. I realized that they actually don't show up.

Is this a bug? Is it intention?

If a web component is not available I would expect an error to be thrown and visible in the console that tells me about it.
If a web component is not functional I would expect it not to be available already ;)

Or am I missing something? Do I need to do more than just using the tags?
I haven't seen any specific importing code for the web components used in the starter code so I expected them to be auto-available because of the core-dependency?

Thanks and best,
Aron

Router link not working.

I just clone the master branch by using the following command
git clone https://github.com/ionic-team/stencil-app-starter my-app ,
shown in the document and install npm and run the project by using npm start but
<stencil-route-link url='/profile/stencil'> <button> Profile page </button> </stencil-route-link>
this navigation button not working.

Error when run npm run build

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

@stencil/[email protected]

Current behavior:
Trying to run npm run build, got the following result:

Runtime error detected while rendering: stencil-route
           undefined is not a function
           /Users/Gusterwoei/Documents/Projects/pwa/github-repo-finder/node_modules/@stencil/core/dist/compiler/index.js:12745
           App.loadBundle = function loadBundle(bundleId, [, ...dependentsList], importer) { ^ TypeError: undefined is
           not a function at Object.loadBundle

Expected behavior:
npm run build run successfully

Steps to reproduce:
Run npm install --save-exact
Run npm run build

Related code:
package.json

{
  "name": "@stencil/starter",
  "private": true,
  "version": "0.0.1",
  "description": "Stencil App Starter",
  "files": [
    "dist/"
  ],
  "scripts": {
    "build": "stencil build --prerender",
    "dev": "sd concurrent \"stencil build --dev --watch\" \"stencil-dev-server\" ",
    "serve": "stencil-dev-server",
    "start": "npm run dev",
    "test": "jest",
    "test.watch": "jest --watch"
  },
  "dependencies": {
    "@stencil/core": "^0.9.11",
    "@stencil/router": "latest",
    "promise-polyfill": "^8.0.0",
    "whatwg-fetch": "^2.0.4"
  },
  "devDependencies": {
    "@stencil/dev-server": "latest",
    "@stencil/utils": "latest",
    "@types/jest": "^21.1.10",
    "jest": "^21.2.1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ionic-team/stencil-app-starter.git"
  },
  "author": "Ionic Team",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/ionic-team/stencil"
  },
  "homepage": "https://github.com/ionic-team/stencil",
  "jest": {
    "transform": {
      "^.+\\.(ts|tsx)$": "<rootDir>/node_modules/@stencil/core/testing/jest.preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(tsx?|jsx?)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json",
      "jsx"
    ]
  }
}

npm start any change will fail with Uncaught SyntaxError: Unexpected token <

@stencil/[email protected]

I'm submitting a ...
[x] bug report

Current behavior:
When start project (clean clone) and install dependencies. Run npm start browser came up as expected, componnent is rendered as expected. Than when I modify file my-name.tsx terminal looks normally, browser refresh and file www/build/app.js will change where parametters appCore has value undefined same for parameter appCorePolyfilled. So live reload is usles, when i run npm start again build procces will succes, change in my-name.tsx will apear.

Expected behavior:
Livereload... output of page change...

Steps to reproduce:
modify my-name.tsx and hit save.

Other information:
Mac OS High Sierra, npm version 5.5.1.

Clean project gives blank page

Stencil version:

@stencil/[email protected]

I'm submitting a ...
[x ] bug report

Current behavior:
After doing all steps in getting started section, I get blank page on http://localhost:3333/

Expected behavior:
I should get some demo layout/text

Steps to reproduce:
Follow steps included in guide.

git clone https://github.com/ionic-team/stencil-app-starter my-app
cd my-app
git remote rm origin
npm install
npm start

Failed to load resource: the server responded with a status of 404 (Not Found)

at this commit: ionic-team/stencil-app-starter@0853cbc

C:\ae\stencil-app-starter>npmtest
'npmtest' is not recognized as an internal or external command,
operable program or batch file.

C:\ae\stencil-app-starter>npm test

> [email protected] test C:\ae\stencil-app-starter
> stencil test --spec --e2e

[09:04.3]  Please wait while required dependencies are installed. This may take a few moments and will only be
           required for the initial run.
[09:04.3]  installing dependencies: @types/jest, jest, jest-cli, @types/puppeteer, puppeteer ...
Downloading Chromium r662092 - 140.3 Mb [====================] 100% 0.0s
+ [email protected]
+ [email protected]
+ [email protected]
+ @types/[email protected]
+ @types/[email protected]
added 504 packages from 414 contributors in 115.593s
[11:02.5]  installing dependencies finished in 118.18 s
[11:02.7]  @stencil/core v1.0.7
[11:02.7]  testing e2e and spec files
[11:02.7]  build, app, dev mode, started ...
[11:03.7]  transpile started ...
[11:07.5]  transpile finished in 3.75 s
[11:07.5]  generate styles started ...
[11:07.5]  bundling components started ...
[11:08.8]  generate styles finished in 1.31 s
[11:10.3]  bundling components finished in 2.80 s
[11:10.5]  build finished in 7.80 s

 PASS  src/components/app-profile/app-profile.spec.ts (5.831s)
 PASS  src/components/app-profile/app-profile.e2e.ts (9.703s)
  ● Console

    console.error node_modules/@stencil/core/dist/testing/index.js:39072
      Failed to load resource: the server responded with a status of 404 (Not Found)
    console.error node_modules/@stencil/core/dist/testing/index.js:39082
      requestfailed http://localhost:3333/build/app.css

 PASS  src/components/app-home/app-home.e2e.ts (9.826s)
 PASS  src/components/app-root/app-root.e2e.ts (5.357s)
  ● Console

    console.error node_modules/@stencil/core/dist/testing/index.js:39072
      Failed to load resource: the server responded with a status of 404 (Not Found)
    console.error node_modules/@stencil/core/dist/testing/index.js:39082
      requestfailed http://localhost:3333/build/app.css
    console.error node_modules/@stencil/core/dist/testing/index.js:39072
      Failed to load resource: the server responded with a status of 404 (Not Found)
    console.error node_modules/@stencil/core/dist/testing/index.js:39082
      requestfailed http://localhost:3333/build/app.css

 PASS  src/components/app-root/app-root.spec.ts
 PASS  src/components/app-home/app-home.spec.ts

Test Suites: 6 passed, 6 total
Tests:       14 passed, 14 total
Snapshots:   0 total
Time:        13.723s
Ran all test suites.

ERROR: The process with PID 2892 (child process of PID 9644) could not be terminated.
Reason: There is no running instance of the task.
ERROR: The process with PID 21836 (child process of PID 9644) could not be terminated.
Reason: There is no running instance of the task.
ERROR: The process with PID 18468 (child process of PID 9644) could not be terminated.
Reason: There is no running instance of the task.
ERROR: The process with PID 21692 (child process of PID 9644) could not be terminated.
Reason: There is no running instance of the task.
ERROR: The process with PID 11636 (child process of PID 9644) could not be terminated.
Reason: There is no running instance of the task.
ERROR: The process with PID 15836 (child process of PID 9644) could not be terminated.
Reason: There is no running instance of the task.

C:\ae\stencil-app-starter>

Add SSR express server

Also might be nice to do a "one click" deploy to a service like Heroku for that SSR server

Stencil PWA starter template with ionic

From @ansarizafar on August 24, 2017 6:10

Is there any Stencil-ionic starter template available? Stencil hacker news demo is using ionic components but the repo is not available.

Copied from original issue: ionic-team/stencil#97

Bug template missing

Ref: ionic-team/stencil-component-starter#16

Cannot step into breakpoint in Visual Studio Code

Resources:
Before submitting an issue, please consult our docs.

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):
@stencil/[email protected]

 insert the output from npm list @stencil/core here

Current behavior:

I cannot step into breakpoint. When I hover over the breakpoint, I see message "breakpoint ignored because generated code not found (source map problem?)".

Expected behavior:

It should step into the breakpoint when I am in debug mode.

Steps to reproduce:

Related code:

insert any relevant code here

Other information:

tsconfig.json seems to be unused

I tried to change some of the typescript configuration and noticed that nothing changed. So then I wondered if the config file was actually being used so I deleted it to see if that would generate any error and it didn't.

So yeah I wonder if that was your intention. Because I found it rather frustrating that I've been trying to change the typescript config for almost an hour, all for naught.

stencil-starter vs stencil-app-starter

Is this repo the go to repo for starting both 'standalone' components & apps?

The Readme for this repo references stencil-starter but that seems to redirect to here.

git clone [email protected]:ionic-team/stencil-starter.git my-app
cd my-app
git remote rm origin

Should this be?

git clone [email protected]:ionic-team/stencil-app-starter.git my-app
cd my-app
git remote rm origin

If so I'll submit a PR if you like.

request: Test example

I think newbies are also interested in writing tests. 😉

Quick guide for current setup on windows 10

The setup on windows 10 is currently a little fuzzy, so I thought I leave a short guide on what did it for me.

Install using npm init stencil app
Switch into the new directory but don't run npm start as suggested by the output yet, instead do an npm install (otherwise it will fail with "Error: baseUrl "https://myapp.local/" must start with a slash "/".")
Open /src/global/app.ts and add the following (otherwise it will fail with "The code to be executed should be placed within a default function that is exported by the global script. Ensure all of the code in the global script is wrapped in the function() that is exported."):

export default function(){
    console.log('An empty file should propably be valid as well');
}

npm start will not work until 2 & 3 are completed.

Confusion with stencil-starter and stencil-component-starter

I have tried both and the difference is not clear.
Why are there two seemingly identical systems?

Stencil router issue. Unable to `npm start`

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

➜  stencil-app-starter git:(master) ✗ npm list @stencil/core
@stencil/[email protected] /Developer/MessAround/stencil-app-starter
└── @stencil/[email protected]

Current behavior:
When running npm start the following errors appear related to the router

TypeError: Cannot read property 'set' of undefined
    at Router.componentWillLoad (my-app.js:902)
    at update (app.core.js:611)
    at plt.queue.add (app.core.js:578)
    at doWork (app.core.js:1197) 3 "STENCIL-ROUTER"

TypeError: Cannot read property 'subscribe' of undefined
    at Route.componentWillLoad (my-app.js:47)
    at update (app.core.js:611)
    at plt.queue.add (app.core.js:578)
    at doWork (app.core.js:1197) 3 "STENCIL-ROUTE"

Expected behavior:
Router should route and display components

Steps to reproduce:

git clone https://github.com/ionic-team/stencil-starter.git my-app
cd my-app
git remote rm origin
npm install
npm start

Other information:

I'm on this commit version:

commit 36418417821d1ece2244aad0527efbb226758eed (HEAD -> master, origin/master, origin/HEAD)
Author: jgw96 <[email protected]>
Date:   Fri Feb 9 09:48:35 2018 -0600

I'm on this versions:

➜  stencil-app-starter git:(master) ✗ node -v
v8.9.4
➜  stencil-app-starter git:(master) ✗ npm -v
5.6.0

Bump deps for stencil app starter

Partial fix in this PR: https://github.com/ionic-team/stencil-app-starter/issues

Change default component to something nicer than my-name

npm install keeps failing

Resources:
Before submitting an issue, please consult our docs.

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

NONE

Current behavior:
When running npm install

Expected behavior:
Install all dependecies

Steps to reproduce:

Clone repo
cd new-app
git remote rm origin
npm install

Related code:

Error printed

ENOENT: no such file or directory, rename '/Users/chrisnwamba/Projects/Pusher/stencil-score-board/node_modules/.staging/@types/node-5e9af05f' -> '/Users/chrisnwamba/Projects/Pusher/stencil-score-board/node_modules/@stencil/core/node_modules/@types/node'

Other information:
I have tried install dependencies for other projects and they work fine so it's not a general problem with npm

Removing app-profile removes routing

Took me a bit to figure out why my routing stopped working after I took out app-profile. Turns out it's because the only place stencil/router is imported is in the app-profile component. It may be better to have the example project have

import '@stencil/router';

imported in the root aka my-app for the example project.

matchPath is not defined.

I am getting this error with both stencil starter and ionic pwa tool kit.

stencil-community / stencil-app-starter Goto Github PK

stencil-app-starter's Introduction

Stencil App Starter

Getting Started

stencil-app-starter's People

Contributors

Stargazers

Watchers

Forkers

stencil-app-starter's Issues

Issue

Resolution

Recommend Projects

Recommend Topics

Recommend Org