Skip to content
This repository was archived by the owner on Jun 28, 2021. It is now read-only.

[Fixes #12] Add Browserify to build #18

Merged
merged 2 commits into from
Jan 2, 2017
Merged

[Fixes #12] Add Browserify to build #18

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f65e4c2
[Fixes #12] Add Browserify to build
bluepichu Jan 2, 2017
81e4535
Don't wrap in a module if exporting globally
bluepichu Jan 2, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
var stage = new PIXI.Container();

// create some white text using the Snippet webfont
var textSample = new MultiStyleText("<pixi>Pixi.js</pixi> can has <multiline>multiline</multiline>\nand <multistyle>multi-styles</multistyle> text!",
var textSample = new MultiStyleText.MultiStyleText("<pixi>Pixi.js</pixi> can has <multiline>multiline</multiline>\nand <multistyle>multi-styles</multistyle> text!",
{
default: { fontFamily: "Tahoma", fontSize: "35px", fill: "white" },
multiline: { fill: "blue" },
Expand All @@ -38,7 +38,7 @@
textSample.position.x = 20;
textSample.position.y = 20;

var nested = new MultiStyleText("(<a>Now with <b>support</b> for <c>nesting <d>tags</d></c>! <e>Wow<f>!!!</f></e></a>)",
var nested = new MultiStyleText.MultiStyleText("(<a>Now with <b>support</b> for <c>nesting <d>tags</d></c>! <e>Wow<f>!!!</f></e></a>)",
{
default: { fontFamily: "Tahoma", fontSize: "24px", fill: 0x222222 },
a: { fill: "blue" },
Expand All @@ -53,7 +53,7 @@
nested.position.y = 100;

// create a text object with a nice stroke
var spinningText = new MultiStyleText("<iam>I'm</iam> fun<and>,</and> fun <and>and</and> fun<ding>!</ding>",
var spinningText = new MultiStyleText.MultiStyleText("<iam>I'm</iam> fun<and>,</and> fun <and>and</and> fun<ding>!</ding>",
{
default: { fontFamily: "Arial", fontSize: "60px", fontStyle: "bold", fill: "#cc00ff", stroke: "#fff", strokeThickness: 20 },
iam: { fontSize: "30px", fill: "#000" },
Expand All @@ -71,7 +71,7 @@
spinningText.position.y = 400 / 2;

// create a text object that will be updated..
var countingText = new MultiStyleText("COUNT 4EVAR: <count>0</count>",
var countingText = new MultiStyleText.MultiStyleText("COUNT 4EVAR: <count>0</count>",
{
default: { fontFamily: "Avro", fontSize: "60px", fontStyle: "bold italic", fill: "#3e1707" },
count: { fontFamily: "Avro", fontSize: "60px", fontStyle: "bold italic", fill: "#3e1707", stroke: "#a4410e", strokeThickness: 7 }
Expand Down
4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,14 @@
"license": "MIT",
"dependencies": {},
"devDependencies": {
"browserify": "^13.1.1",
"tsify": "^2.0.7",
"@types/pixi.js": "^4.3.1",
"typescript": "^2.1.4"
},
"scripts": {
"demo": "npm run build && open demo/index.html",
"build": "tsc",
"build": "tsc; browserify pixi-multistyle-text.ts -p tsify -s MultiStyleText -o dist/pixi-multistyle-text.js -d",
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought tsc was already compiling down to basic JS. Could you explain why browserify is required here?

Also, I'd like to find a way to remove the new wrapped module to remove the duplicationMultiStyleText.MultiStyleText when the file is injected in a script tag instead of using a commonjs require/import for example.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The point of Browserify here is to export the module for CommonJS and AMD if either of those are being used, and otherwise defaulting to a global export. This is similar to how Pixi itself functions (and they also use Browserify to build). I was originally hoping we could get away with using TS's umd module mode, which handles both CommonJS and AMD properly, but it doesn't default to exposing the module globally if neither is found.

I'd also like to remove the "double wrapping" problem if possible, but I couldn't find a way to do so. (In particular, I would've expected that export default class MultiStyleText would do the trick, but that instead exports the class to MultiStyleText.default.)

I'll keep looking into it.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I found a solution. I don't love it (it's kind of a hack), but it works. See TypeStrong/tsify#105.

"prepublish": "npm run build"
}
}
6 changes: 3 additions & 3 deletions pixi-multistyle-text.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

"use strict";

interface ExtendedTextStyle extends PIXI.TextStyleOptions {
export interface ExtendedTextStyle extends PIXI.TextStyleOptions {
valign?: "top" | "middle" | "bottom";
}

interface TextStyleSet {
export interface TextStyleSet {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it necessary/useful to export the interfaces?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it's required - you can't export the MultiStyleText class if it has properties or methods that use types that wouldn't be accessible externally.

[key: string]: ExtendedTextStyle;
}

Expand All @@ -24,7 +24,7 @@ interface TextData {
fontProperties: FontProperties;
}

class MultiStyleText extends PIXI.Text {
export class MultiStyleText extends PIXI.Text {
private textStyles: TextStyleSet;

constructor(text: string, styles: TextStyleSet) {
Expand Down
2 changes: 1 addition & 1 deletion tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"module": "none",
"module": "umd",
"moduleResolution": "node",
"removeComments": true,
"sourceMap": true,
Expand Down