Socius

A web component library built with

Initial project setup

If stencil is not installed, get the latest like this:

npm install @stencil/core@latest --save-exact

npm init stencil

change is the namespace in the stencil.config.ts file.

yarn add --dev @stencil/sass

npm add --save-dev @stencil/sass

I should have used npm i but let add run due to surprise that it was working. What's the difference between install and add for npm? Not sure.

Some problems at first:

[ts] Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node`.
$ npm i @types/node
[ts] Cannot find name 'describe'.
$ npm install --save-dev @types/jasmine
[ts] Property 'toHaveClass' does not exist on type 'Matchers<E2EElement>'.
SO:  no help for this

First test run with button:

 PASS  src/components/my-component/my-component.spec.ts
 PASS  src/components/button/button.spec.ts
 FAIL  src/components/button/button.e2e.ts (16.59s)
  ● button › renders changes to the name data
    Evaluation failed: Error: shadow root does not exist for element: button
      at __puppeteer_evaluation_script__:3:2
      at ExecutionContext.evaluateHandle (node_modules/puppeteer/lib/ExecutionContext.js:106:13)
 PASS  src/components/my-component/my-component.e2e.ts (18.697s)
Test Suites: 1 failed, 3 passed, 4 total
Tests:       1 failed, 10 passed, 11 total
Snapshots:   0 total
Time:        20.191s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

Next time running npm start, the console gets filled with errors like this:

"node_modules/@types/jasmine/index.d.ts, line 19, column 17↵Duplicate identifier 'describe'."

Had to add this to the tsconfig compilerOptions: "types": []

The tests are not running on an older mac.

[26:59.0]  generate app files finished in 165 ms

[ ERROR ]  Timed out after 30000 ms while trying to connect to Chrome! The only Chrome revision guaranteed to work is r588429 TimeoutError: Timed out after 30000 ms while trying to connect to Chrome! The only Chrome revision guaranteed to work is r588429 at Timeout.onTimeout
(/Users/tim/repos/loranthifolia-teretifolia-curator/socius/node_modules/puppeteer/lib/Launcher.js:344:14) at
ontimeout (timers.js:466:11) at tryOnTimeout (timers.js:304:5) at Timer.listOnTimeout (timers.js:267:5)

This may be a memory issue. Just running the unit tests by themselves works fine:

PASS  src/components/item/item.spec.ts
 PASS  src/components/button/button.spec.ts

Test Suites: 2 passed, 2 of 4 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        10.358s
Ran all test suites.

Made a separate script to do just this to separate them from the e2e tests. npm run units is the command.

Planning to use these components in the Salicifolia repository.

Next up, @Watch(), @Method(), and @State().

JSDocs

npm run docs

$ npm -v
3.10.9
QuinquenniumF:socius tim$ nvm use 9
module.js:471
    throw err;
    ^
Error: Cannot find module './nvm-help'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/usr/local/lib/node_modules/nvm/bin/nvm:24:3)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)

SO Solution and then:

source ~/.nvm/nvm.sh
nvm ls

$ npm run docs
> [email protected] docs /Users/tim/repos/loranthifolia-teretifolia-curator/socius
> stencil build --docs
[53:30.0]  @stencil/core v0.15.2 🌯
[53:30.0]  build, curchod-ui, prod mode, started ...
[53:30.1]  transpile started ...
[53:32.2]  transpile finished in 2.08 s
[53:34.8]  module map started ...
[53:34.8]  generate styles started ...
[53:35.4]  module map finished in 589 ms
[53:35.7]  generate styles finished in 961 ms
[53:35.7]  generate bundles started ...
[53:35.8]  generate bundles finished in 4 ms
[53:35.8]  generate app files started ...
[53:46.4]  generate app files finished in 10.67 s
[53:58.4]  created readme docs: curchod-button
[53:58.4]  build finished in 28.38 s

Docs typo

When this feature is used it an be useful for others to easily find and read formatted docs about one component. should be can not an. https://stenciljs.com/docs/docs-auto-generation

To simplify it all, Stencil breaks it down to so developers have a defined description of when to use each type of testing. "down to so" should be "down so". https://stenciljs.com/docs/testing-overview/

Stencil Component Starter

This is a starter project for building a standalone Web Component using Stencil.

Stencil is also great for building entire apps. For that, use the stencil-app-starter instead.

Stencil

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.

Getting Started

To build the component for production, test, generate docs, etc, run:

npm run build
npm test
npm run docs

Need help? Check out our docs here.

Naming Components

When creating new component tags, we recommend not using stencil in the component name (ex: <stencil-datepicker>). This is because the generated component has little to nothing to do with Stencil; it's just a web component!

Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix ion.

Using this component

Script tag

• Publish to NPM
• Put a script tag similar to this <script src='https://unpkg.com/[email protected]/dist/mycomponent.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install my-component --save
• Put a script tag similar to this <script src='node_modules/my-component/dist/mycomponent.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install my-component --save
• Add an import to the npm packages import my-component;
• Then you can use the element anywhere in your template, JSX, html etc