TypescriptHtmlPackager

HOW TO USE:

Install the extension
Create a HtmlPackage.json file in your project
Put this text into the HtmlPackage.json file (replace the .html files with your own):

{
    "nestedHtml": true,
    "renderSettings": {
        "makeRenderers": true,
        "makeResourceCache": false,
        "outputType": "STRING"
    },
    "resources": [],
    "projectFiles": [
        "index.html",
        "index1.html"
    ]
}

If you want to be able to package html files into another html file you have to change "nestedHtml" to true. In order to nest html into another html file use the tag ${htmlFiles.YOURFILE_HTML}
In order to generate what localization dependencies your renderers have, you need to include the path to the "resource" of which is a .RESX file containing localized texts. This can be used in order to ask a server endpoint for texts to display ( based on language ).

Right click the HtmlPackage.json file and go to Properties
Put in "TypescriptHtmlPackager" ( without quotes ) into the Custom Tool field.
Right click HtmlPackage.json and click Run Custom Tool.

The generated typescript will be without a module system and will look something like this:

declare module HtmlPackage {
	export interface HtmlFiles {
		INDEX_HTML: string;
	}
	export interface Renderers {
		helloWorld(str: string): string;
	}
}

let htmlFiles: HtmlPackage.HtmlFiles;
if(!htmlFiles) (htmlFiles as any) = {};

htmlFiles["INDEX_HTML"] = '<html></html>';

let renderers: HtmlPackage.Renderers;
if(!renderers) (renderers as any) = {};

renderers["helloWorld"] = function(str: string): string {
	return '<h1>' + str + '</h1>';
}

HOW TO REFERENCE THE FILES

The project is required to compile typescript into a single file, and without a module system. -- Right click your project and click "Properties". Look for the Typescript Build tab. Have the JSX compilation in TSX files set to: "NONE" and Module System set to: "None". Check the Combine JavaScript output into file and define a path to put your packaged typescript.
If you have not already done so, make sure the generated .js file is referenced by your main html page.
If you want to access the html page strings you need to include this in your .ts file ///<reference path="HTMLPackage.ts" />
Access the variables by: htmlFiles.INDEX_HTML

RENDERERS In this recent update, you have the ability to define a renderer inside a html file. You can do this with the '' tag encapsulating the template.

In this example we make a renderer for displaying a string that is sent through as a parameter inside a header tag:

<renderer name="renderParameter" parameter="string">
	<h1>${parameter}</h1>
</renderer>

The name attribute tells the packager that this renderer will be called: renderParameter. And any other attribute defines what kind of parameters this renderer has. The above example will produce the output:

declare module HtmlPackage {
	export interface Renderers {
		renderParameter(parameter: string): string;
	}
}

let renderers: HtmlPackage.Renderers;
if(!renderers) (renderers as any) = {};

renderers["renderParameter"] = function(parameter: string): string {
	return '<h1>' + parameter + '</h1>';
}

You can also get different output based on the outputType parameter: Possible output types are: STRING, STRING_TEMPLATE, JQUERY.

STRING_TEMPLATE will use the new templating functionality supported in most browsers ( Except IE11, so i avoid it ). JQUERY can be used if you are using that as a plugin. Then the function will return a JQuery type.

UPDATES

05.08.2021

You are able to reference .resx files in order to use them for localization. The way this works is that a ResourceCache class is generated, and you have to manually define a DataAdapter that implements the interface IResourceAdapter. Wether or not to load a JSON file or communicate with a server is up to you.

03.26.2021

You can now create parameterized renderable templates by the use of the <renderer name="functionName"></renderer> tag.

01.31.2021

Single quote characters are now escaped, in case someone decided to use that in some text on their page.

02.03.2021

You can nest html files into other html files when packaging ( this is optional )
Now removes BOM file signature that defines the encoding of the file read

Lars Magnus Nyland