VisualStudio StencilJS component template

README.md

Install:

1. %USERPROFILE%\Documents to open Documents
2. Open Visual Studio 20XX folder
3. Open Templates folder
4. Open ItemTemplates folder
5. Open TypeScript folder
6. Download each of these files into the TypeScript folder

Usage:

1. Right-click on your components folder (or whatever folder you want to put your new component into)
2. Hover over Add > option
3. Choose New item... Ctrl+Shift+A option
4. Seek for StencilJS Component (probably is the first item available, if you're in a ASP.net Core C# Project)
5. Give the name you want for your component (it must have a - in it). Ex.: my-component
6. Open my-component.ts, and find the export class my_component
7. Click on my_component and use Rename in it ([F2] or right-click, Rename... option)
8. Overwrite my_component to MyComponent and press [Enter] (or [Apply] on the rename mini-window)

A folder called my-component will be created with these files inside it:

1. my-component.scss: main SASS style for the component (imported through files 2 and 3)
2. my-component.ios.scss: SASS file used only for iOS platform
3. my-component.md.scss: SASS file used for all platforms, except iOS (material design)
4. my-component.ts: Your view model file (no TSX allowed here, only Props, State, etc. methods available for the view must be public, otherwise, private or protected are fine)
5. my-component.view.tsx: Your view (it will import and use your viewModel)
6. my-component.models.ts: An empty file for your models (it will import Type from class-transform/decorators, see https://github.com/typestack/class-transformer)

component.ios.scss

@import "./$fileinputname$";

component.md.scss

@import "./$fileinputname$";

component.models.ts

import { Type } from "class-transformer/decorators";

component.scss

$fileinputname$
{
}

component.ts

import { Component } from "@stencil/core";
import view from "./$fileinputname$.view";

@Component({ tag: "$fileinputname$", styleUrls: { ios: "$fileinputname$.ios.scss", md: "$fileinputname$.md.scss" } })
export class $safeitemname$
{
	protected render()
	{
		return view(this);
	}
}

component.view.tsx

import { $safeitemname$ } from "./$fileinputname$";

export default function($: $safeitemname$)
{
	return (
		<div>$fileinputname$</div>
	);
}

StencilJSComponent.vstemplate

<VSTemplate Version="3.0.0" xmlns="http://schemas.microsoft.com/developer/vstemplate/2005" Type="Item">
  <TemplateData>
    <Name>StencilJS Component</Name>
    <Description>Componente StencilJS contendo estilo, view e viewModel</Description>
    <Icon Package="{39c9c826-8ef8-4079-8c95-428f5b1c323f}" ID="4703"/>
    <ProjectType>CSharp</ProjectType>
    <TemplateGroupID>AspNetCore</TemplateGroupID>
    <SortOrder>0</SortOrder>
    <ShowByDefault>true</ShowByDefault>
	<DefaultName>my-component</DefaultName>
  </TemplateData>
  <TemplateContent>
    <References />
    <ProjectItem ReplaceParameters="true" TargetFileName="$fileinputname$\$fileinputname$.scss">component.scss</ProjectItem>
	<ProjectItem ReplaceParameters="true" TargetFileName="$fileinputname$\$fileinputname$.ios.scss">component.ios.scss</ProjectItem>
	<ProjectItem ReplaceParameters="true" TargetFileName="$fileinputname$\$fileinputname$.md.scss">component.md.scss</ProjectItem>
	<ProjectItem ReplaceParameters="true" TargetFileName="$fileinputname$\$fileinputname$.ts">component.ts</ProjectItem>
	<ProjectItem ReplaceParameters="true" TargetFileName="$fileinputname$\$fileinputname$.models.ts">component.models.ts</ProjectItem>
	<ProjectItem ReplaceParameters="true" TargetFileName="$fileinputname$\$fileinputname$.view.tsx">component.view.tsx</ProjectItem>
  </TemplateContent>
</VSTemplate>