PuruVJ

{
	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	"Named import": {
		"scope": "javascript,javascriptreact,typescript,typescriptreact",
		"prefix": "from",

PuruVJ

import { h } from "@stencil/core";
import { IUser } from "../interfaces/user.interface";

export const UserAvatar = ({ user, size = 36 }: {user: IUser, size: number}) => {
  const {name, luminosity, name} = user;
  const [r, g, b] = themeColor
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 100 100"

PuruVJ

import { Component, Prop, h } from '@stencil/core';
import Helmet from "/path/to/helmet.tsx";

@Component({
  tag: 'my-first-component',
})
export class MyComponent {

  // Indicate that name should be a public property on the component
  @Prop() name: string;

PuruVJ

import { h, FunctionalComponent, VNode, Build } from "@stencil/core";

const Helmet: FunctionalComponent = (_prop, children: VNode[]) => {
  if (Build.isBrowser) {
    for (let child of children) {
      const tagName = child.$tag$.toString();
      const attributes: {
        [key: string]: string;
      } = child.$attrs$;