ionic-team/ionic-stencil-hn-app

Ionic Stencil HackerNews App

Ionic-Stencil HN app

Stencil is a compiler for building fast web apps and components 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).

This PWA is a Hacker News demo built with Stencil and our Ionic core components that are also built with Stencil.

Want to try it live? Check it out here.

Performance

We use WebPageTest to keep track of the loading performance of this demo on real, low end devices and an emerging markets 3G network. Here is the latest lighthouse from our latest WebPageTest. This is with a Moto G with an emerging markets 3G network.

Getting Started

To start devving on this project, clone this repo and run:

npm install

then run:

npm run dev

to get a live reload server that watches for changes

To build the app for production, run:

npm run build

ionic-stencil-hn-app's Issues

Default link changed in latest code commit but not in repo list

What am I not understanding here?

Cloning Project Error

Procedure:

1. clone repo
2. npm insatll

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\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 ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-c
li.js" "install"
npm ERR! node v6.11.3
npm ERR! npm v3.10.10
npm ERR! path C:\Users\Jake21x\Desktop\dev\ionic-stencil-hn-app\node_modules.staging@types\node-5b596f01
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall rename

npm ERR! enoent ENOENT: no such file or directory, rename 'C:\Users\Jake21x\Desktop\dev\ionic-stencil-hn-app
node_modules.staging@types\node-5b596f01' -> 'C:\Users\Jake21x\Desktop\dev\ionic-stencil-hn-app\node_module
s@stencil\core\node_modules@types\node'
npm ERR! enoent ENOENT: no such file or directory, rename 'C:\Users\Jake21x\Desktop\dev\ionic-stencil-hn-app
node_modules.staging@types\node-5b596f01' -> 'C:\Users\Jake21x\Desktop\dev\ionic-stencil-hn-app\node_module
s@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:\Users\Jake21x\Desktop\dev\ionic-stencil-hn-app\npm-debug.log

Local Machine
OS: win7 64bit
NPM : 3.10.10
NODE: v6.11.3

Deep linking does not work 100%

For example, navigating to https://corehacker-10883.firebaseapp.com/news/3 does not go to the 3rd page, but to the first page. However, navigating to specific comment page works fine, i.e. https://corehacker-10883.firebaseapp.com/comments/16869488. Great stuff otherwise.

Changing page should reset scroll to top

As well as show skeleton items instead of old ones probably

When you update the app, make sure that the SW is refreshed

You need to touch the SW for it to update (ie do a const version = 1 inside and bump it). Then remove old cached resources and re-cache).

Also make sure the SW is ALWAYS no-cache! same with manifest.json.

Add Tools Used on README.MD

Considering this is just a simple vanilla PWA that anyone can build with Stencil. We should have more on the README about the process of building. Like tools used etc.

Sometimes comments sheet is emphy

ie. it looks transparent - but it is probably just not showing.

stencil-dev-server returns FATAL ERROR: CALL_AND_RETRY_LAST

After running npm run dev despite the server returning:

[24:48.8] @stencil/core v0.1.1-0
[24:48.9] build, app, dev mode, started ...
[24:48.9] compile started ...
[24:56.2] compile finished in 7.32 s
[24:57.1] bundle styles started ...
[24:57.1] bundle modules started ...
[25:03.0] bundle styles finished in 5.98 s
[25:05.4] bundle modules finished in 8.35 s
[25:07.5] build finished, watching for changes... in 18.64 s

Nothing is rendered on the browser. Eventually, after some time, the server crashes with this error.

<--- Last few GCs --->

[31933:0x3fff920]   200566 ms: Mark-sweep 1397.9 (1457.8) -> 1397.9 (1457.8) MB, 1462.8 / 6.4 ms  allocation failure GC in old space re
quested
[31933:0x3fff920]   202141 ms: Mark-sweep 1397.9 (1457.8) -> 1397.9 (1426.8) MB, 1557.7 / 6.5 ms  last resort GC in old space requested
[31933:0x3fff920]   203642 ms: Mark-sweep 1397.9 (1426.8) -> 1397.9 (1426.8) MB, 1500.1 / 5.2 ms  last resort GC in old space requested


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0x38fe90a25739 <JSObject>
    2: has [/home/leo/Documents/Development/AndroidProjects/IonicProjects/stencil-test/ionic-stencil-hn-app/node_modules/chokidar/index
.js:~483] [pc=0x25b472128a45](this=0x30f4a062a849 <Object map = 0x966dd1284d9>,item=0x1b3688ebdf69 <String[25]: ios-add-circle-outline.
js>)
    3: /* anonymous */ [/home/leo/Documents/Development/AndroidProjects/IonicProjects/stencil-test/ionic-stencil-hn-app/nod...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node::Abort() [stencil-dev-server]
 2: 0x11ef43c [stencil-dev-server]
 3: v8::Utils::ReportOOMFailure(char const*, bool) [stencil-dev-server]
 4: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [stencil-dev-server]
 5: v8::internal::Factory::NewFixedArray(int, v8::internal::PretenureFlag) [stencil-dev-server]
 6: v8::internal::HashTable<v8::internal::StringTable, v8::internal::StringTableShape>::NewInternal(v8::internal::Isolate*, int, v8::in
ternal::PretenureFlag) [stencil-dev-server]
 7: v8::internal::HashTable<v8::internal::StringTable, v8::internal::StringTableShape>::New(v8::internal::Isolate*, int, v8::internal::
PretenureFlag, v8::internal::MinimumCapacity) [stencil-dev-server]
 8: v8::internal::HashTable<v8::internal::StringTable, v8::internal::StringTableShape>::EnsureCapacity(v8::internal::Handle<v8::interna
l::StringTable>, int, v8::internal::PretenureFlag) [stencil-dev-server]
 9: v8::internal::StringTable::LookupString(v8::internal::Isolate*, v8::internal::Handle<v8::internal::String>) [stencil-dev-server]
10: v8::internal::Runtime_HasProperty(int, v8::internal::Object**, v8::internal::Isolate*) [stencil-dev-server]
11: 0x25b471f842fd
Aborted (core dumped)
     

Component tag not matching any component in app when running npm start, serve, dev.

Details of the errors are below.
Maybe until things settle down a bit these dependencies should be fixed versions

  "dependencies": {
    "@ionic/core": "0.0.2-20",
    "@stencil/core": "^0.1.1-0",
    "@stencil/router": "0.0.17-1"
  },
  "devDependencies": {
    "@stencil/dev-server": "latest",
    "@stencil/utils": "latest"

---- ERROR LOG ----

ERROR ]  Component tag "ask-page" is defined in a bundle but no matching component was found within this app or its 
           collections. 

[ ERROR ]  Component tag "comments-list" is defined in a bundle but no matching component was found within this app or 
           its collections. 

[ ERROR ]  Component tag "comments-page" is defined in a bundle but no matching component was found within this app or 
           its collections. 

[ ERROR ]  Component tag "ionic-hn" is defined in a bundle but no matching component was found within this app or its 
           collections. 

[ ERROR ]  Component tag "news-page" is defined in a bundle but no matching component was found within this app or its 
           collections. 

[ ERROR ]  Component tag "story-list" is defined in a bundle but no matching component was found within this app or its 
           collections. 

[ ERROR ]  Component tag "jobs-page" is defined in a bundle but no matching component was found within this app or its 
           collections. 

[ ERROR ]  Component tag "show-page" is defined in a bundle but no matching component was found within this app or its 
           collections. 

[57:06.1]  build failed in 1.77 s 

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @stencil/[email protected] build: `stencil build --prerender`

Next page just increments page no and doesn't change page

Click on Show tab then click next page quickly, multiple times.and it will stop working

Service worker does not load after building

Service workers works perfectly on dev.
When running from the build, service worker does not load.

Facing issue after 'npm run dev'

After npm run dev I am getting issue like that

@stencil/[email protected] dev C:\OFFICE DATA\ionic-stencil-hn-app
sd concurrent "stencil build --dev --watch" "stencil-dev-server"

events.js:137
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE :::3333
at Object._errnoException (util.js:1003:13)
at _exceptionWithHostPort (util.js:1024:20)
at Server.setupListenHandle [as _listen2] (net.js:1366:14)
at listenInCluster (net.js:1407:12)
at Server.listen (net.js:1495:7)
at Object. (C:\OFFICE DATA\ionic-stencil-hn-app\node_modules@stencil\dev-server\dist\index.js:88:64)
at Generator.next ()
at fulfilled (C:\OFFICE DATA\ionic-stencil-hn-app\node_modules@stencil\dev-server\dist\index.js:4:58)
at
at process._tickCallback (internal/process/next_tick.js:160:7)
[57:52.4] @stencil/core v0.1.1-0
[57:52.4] build, app, dev mode, started ...
[57:52.4] compile started ...
[58:00.7] compile finished in 8.31 s
[58:01.9] bundle styles started ...
[58:02.0] bundle modules started ...
[58:03.5] bundle styles finished in 1.64 s
[58:08.3] bundle modules finished in 6.27 s
[58:13.9] build finished, watching for changes... in 21.46 s

Nothing showing anything in browser, Please help

Npm install fails at node-sass postinstall script

20 warnings and 8 errors generated.
make: *** [Release/obj.target/binding/src/binding.o] Error 1
gyp ERR! build error
gyp ERR! stack Error: make failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/Users/tiago/git/github/ionic-stencil-hn-app/node_modules/node-gyp/lib/build.js:258:23)
gyp ERR! stack at ChildProcess.emit (events.js:200:13)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
gyp ERR! System Darwin 18.6.0
gyp ERR! command "/usr/local/Cellar/node/12.4.0/bin/node" "/Users/tiago/git/github/ionic-stencil-hn-app/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/tiago/git/github/ionic-stencil-hn-app/node_modules/node-sass
gyp ERR! node -v v12.4.0
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok
Build failed with error code: 1
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

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: node scripts/build.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

In IE11 when try to go to news next page, page becomes not clickable.

When I try to load the app in IE11 the page loads fine, but if I try to go to second page of the news the page will become not clickable. Comparing to chrome I noticed the "Loading" popup never showed, which caused the "loading-backdrop" overlay blocking the page content.

Can I use this seed ionic-stencil-hn-app with ngrx?

hello guys,
Can I use this seed ionic-stencil-hn-app with ngrx?

Button in toolbar needs to be wrapped in ion-button

The button on the comment page is written as:

<ion-button slot="start">

which is causing the height of the toolbar to be larger & covering content (created issue ionic-team/stencil#89 for the fact content doesn't adjust properly).

It should be written as the following though:

<ion-buttons slot="start">
  <ion-button>

npm run dev errors out

$ npm run dev

@stencil/[email protected] dev
sd concurrent "stencil build --dev --watch" "stencil-dev-server"

[57:27.1] @stencil/core v0.1.6
[57:27.2] build, app, dev mode, started ...
[57:27.2] compile started ...
[ WARN ] @PropDidChange('pageNum') decorator within "list-container" component has been deprecated. Please update to
@watch('pageNum').
[57:39.6] compile finished in 12.41 s
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/action-sheet-controller/action-sheet-controller.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/alert-controller/alert-controller.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/app/app.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/buttons/buttons.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/grid/col.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/content/content.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/fab/fab-container.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/fab/fab-list.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/footer/footer.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/header/header.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/dependencies/icon/icon.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/item/item.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/item-divider/item-divider.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/item-sliding/item-options.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/item-sliding/item-option.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/item-sliding/item-sliding.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/label/label.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/list/list.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/list-header/list-header.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/loading-controller/loading-controller.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/menu/menu-controller.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/modal-controller/modal-controller.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/toolbar/navbar.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/page/page.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/popover-controller/popover-controller.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/radio/radio-group.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/range/range-knob.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/reorder/reorder.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/grid/row.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/segment-button/segment-button.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/select-option/select-option.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/select/select-popover.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/skeleton-text/skeleton-text.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/tabs/tab.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/tabs/tab-bar.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/tabs/tab-button.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/tabs/tab-highlight.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/title/title.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/toast-controller/toast-controller.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/toolbar/toolbar.js:
TypeError: Cannot read property 'map' of undefined
[57:41.8] bundle styles started ...
[57:42.0] bundle modules started ...
[57:43.6] bundle styles finished in 1.76 s
[57:44.8] bundle modules finished in 2.88 s
[57:44.8] generate bundles started ...
[57:44.8] generate bundles finished in 12 ms

[ ERROR ] Error parsing: bundle:ion-segment.ion-segment-button, line: 2, column: 9

[ ERROR ] rollup died at
\node_modules@stencil\core\dist\compiler\index.js:1781:19 at
Generator.throw () at rejected
(\node_modules@stencil\core\dist\compiler\index.js:1748:65) at

[ ERROR ] Error parsing: bundle:ion-col.ion-grid.ion-row, line: 1, column: 9

[ ERROR ] Error parsing: bundle:ion-menu.ion-menu-controller, line: 2, column: 9

[ ERROR ] Error parsing: bundle:ion-radio.ion-radio-group, line: 2, column: 9

[ ERROR ] Error parsing: bundle:ion-range.ion-range-knob, line: 2, column: 9

[ ERROR ] Error parsing: bundle:ion-fab.ion-fab-button.ion-fab-list, line: 1, column: 9

[ ERROR ] Error parsing: bundle:ion-reorder.ion-reorder-group, line: 1, column: 9

[ ERROR ] Error parsing: bundle:ion-button.ion-buttons.ion-icon, line: 2, column: 9

[ ERROR ] Error parsing: bundle:ion-select.ion-select-option.ion-select-popover, line: 2, column: 9

[ ERROR ] Error parsing: bundle:ion-tab.ion-tab-bar.ion-tab-button.ion-tab-highlight.ion-tabs, line: 1, column: 9

[ ERROR ] Error parsing: bundle:ion-alert.ion-alert-controller, line: 2, column: 9

[ ERROR ] Error parsing: bundle:ion-action-sheet.ion-action-sheet-controller, line: 2, column: 9

[ ERROR ] Error parsing: bundle:ion-loading.ion-loading-controller, line: 2, column: 9

[ ERROR ] Error parsing: bundle:ion-toast.ion-toast-controller, line: 2, column: 9

[57:56.5] build failed, watching for changes... in 29.33 s

Use MD loading spinner

The one being used looks weird.

lots of blank pages

Chrome Version 62.0.3202.94 (Official Build) (64-bit)

Clicking on next page eventually stops changing content

I'm not sure if it "runs out" of data or if the fetch isn't working properly or something, but by clicking "next" until I get to page 10 it stops changing the content. I can continue clicking next as much as I want but nothing changes. It should either stop showing me "next" once there are no ore pages or grab the right data if it exists:

Scrolling down on a page then going to a new page maintains position

I think when you click "next" to go to a new page it should scroll the content back to the top instead of maintaining the scroll position. It seems weird that I would be halfway down a new page when I didn't scroll to that position.