WH

More Log Information when Vite Server Runs

Using the -d option with the Vite command in the npm script to have more verbose output for debugging.

// ...
    "scripts": {
        "dev": "vite -d",
        "build": "vite build",
        "preview": "vite preview"
    }
// ...

Use the 'configure-server'

Create a Vite application from the new project command with a template option. This command will create a simple TypeScript project.

npm create vite@latest a-vite-test -- --template vanilla-ts

Assign Git Profiles for Different Repositories

On occasions where you wish to associate different Git profiles to different repositories, such as when you have a work account and a personal account, one can achieve this by running a Git config command on repository level basis.

Linking Stylesheet in the Template

To use even a basic css library will cause some styles to be applied globally to the entire page, but you wish to localize the styling to just the web component which you are defining.

Importing the third party css library in the static style definition will not bring in the styles.

static styles = css`

// This won't work
@import 'bulma/css/bulma.css';

...
`

Customize the cherry-picked Commit Message

You are working on a branch focusing on a certain feature, but you end up adding in commit messages that are not presentable enough to be applied to your main branch. To fix this problem, you can rebase to squash the commits and then cherry-pick the changes onto the main branch.

Wait for DOM Change before Taking Action

Assume that we have a button which sets up with a click event listener to call upon a toggling of state to display an associated container:

import { LitElement, html } from "lit-element";

class MyElement extends LitElement {

  render() {
    return html`
      <button @click="${this._handleClick}">click</button>
      <div id="container" class=${this.open ? 'expanded' : 'collapsed'}>
        The contents.
      </div>
    `;
  }

  _handleClick() {
    this._toggleContainer();
  }

  //...
}

//...

Share Global Styles on Compile and Runtime

Linaria is able to achieve zero-runtime css-in-js because it compiles the js to css before the local dev server startup, however one might wish to share and modify styles used by Linaria during development.

Since one can't use Linaria when the dev server is running for client css-in-js, the base styles will need to be handed over to another css-in-js library for modification.