web-padawan

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="my-element">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    

web-padawan

• name: Guake
• window: full-width top of the screen
• screen: main screen
• space: all spaces
• columns: 80
• rows: 50
• hotkeys: a hotkey opens a dedicated window with this profile

web-padawan

What?

Testing Polymer 2 web components against headless browsers: Chrome and Firefox.

• Headless Chrome was shipped in Chrome 59.
• Headless Firefox works on Firefox 55+ on Linux, and 56+ on Windows and Mac
• Support for both was recently shipped in web-component-tester 6.5.0 release

Why ?

web-padawan

Goal

1. Help the adoption of Going Buildless by frontend developers, regardless of frameworks or libraries they use.

2. Make the most valuable tools related to Going Buildless easy to discover, use and contribute to.

Overview

@open-wc has become an umbrella project which consists of lots of parts mixed in the same repo and docs site:

web-padawan

Using TypeScript definitions

Vaadin components come with TypeScript definitions helping to use web components in TypeScript views. The type definitions are d.ts files generated every time when new release is published to npm.

Support for TypeScript definitions is added in Vaadin 17. In most of cases, it does not require any changes to the code. At the same time, using proper types for the web components helps to make the client side views more reliable. Depending on the IDE you use, TypeScript definitions can also give additional benefits like better code completion and auto import.

If you are using Visual Studio Code, we recommend to install

web-padawan

Using @web/dev-server

Documentation: https://modern-web.dev/docs/test-runner/overview/

Writing tests

Libraries

Import @esm-bunde/chai:

web-padawan

const $value = Symbol('value');

class MyElement extends HTMLElement {
  static get observedAttributes() {
    return ['value'];
  }
  
  set value(value) {
    this[$value] = value;
  }

web-padawan

const $hello = Symbol('hello');
const $world = Symbol('world');

class HelloWorld extends HTMLElement {
  static get observedAttributes() {
    return ['hello', 'world'];
  }

  set hello(hello) {
    this[$hello] = hello;

web-padawan

diff --git a/node_modules/@4tw/cypress-drag-drop/index.js b/node_modules/@4tw/cypress-drag-drop/index.js
index efde88e..05a0733 100644
--- a/node_modules/@4tw/cypress-drag-drop/index.js
+++ b/node_modules/@4tw/cypress-drag-drop/index.js
@@ -1,7 +1,7 @@
 const dataTransfer = new DataTransfer()
 
 function isAttached(element) {
-  return !!element.closest('html')
+  return element.isConnected;

web-padawan

#!/usr/bin/env node

const cliProgress = require('cli-progress');
const gh = require('github-url-to-object');
const meow = require('meow');
const puppeteer = require('puppeteer');

const usage = `Usage
  $ github-dependents <repository>