├── .gitignore ├── README.md ├── bsconfig.json ├── css └── codemirror.css ├── examples ├── pixiBasics │ ├── example_001.js │ ├── example_002.js │ ├── example_003.js │ ├── example_004.js │ ├── example_005.js │ ├── example_006.js │ ├── example_007.js │ ├── example_008.js │ ├── example_009.js │ ├── example_010.js │ ├── example_011.js │ └── example_012.js └── pixiBasicsMega.txt ├── experiments ├── flowtest.js └── types.sh ├── index-dev.html ├── index-dist.html ├── index.html ├── package-lock.json ├── package.json ├── src ├── Test.re ├── TestNode.re ├── example-node.txt ├── example.ast ├── example.txt ├── external.js ├── index.js ├── lib.js ├── listNodes.js ├── node.js ├── puppet.js ├── runtests.js └── transpileExamples.sh └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | *.swp 2 | /dist/index.js 3 | /dist/test.js 4 | /dist/node.js 5 | /dist/runtests.js 6 | .DS_Store 7 | .merlin 8 | .bsb.lock 9 | npm-debug.log 10 | /lib/bs/ 11 | /node_modules/ 12 | /src/*.bs.js 13 | /rebuild/ 14 | /src/Example*.re 15 | /.nyc_output/ 16 | /src/Test.re 17 | /coverage/ 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript to ReasonML Transpiler 2 | 3 | Check it out [Live on GitHub 4 | Pages](https://emnh.github.io/js-to-reasonml-transpiler). Tested with: 5 | - Chrome 65 6 | - Firefox 59 7 | - Edge 41 8 | 9 | ## Table of contents 10 | 11 | - [Introduction](#introduction) 12 | - [Example transpilation](#example-transpilation) 13 | - [Manual labour](#manual-labour) 14 | - [Testing examples](#testing-examples) 15 | - [Running tests](#running-tests) 16 | - [Supported syntax](#supported-syntax) 17 | - [Alternatives](#alternatives) 18 | 19 | # Introduction 20 | 21 | This is a helper script to port small examples from JS to ReasonML. It should 22 | be mainly for generating a baseline for externals, unless it grows to something 23 | bigger :p . Requires to actually run the code with eval because it will inspect 24 | the types for declaration at runtime. Code path coverage in example must be 25 | 100% for now (TODO: implement partial transpilation with unresolvedAnyT if 26 | requested). 27 | 28 | Why eval and not flow? I tried flow and it wasn't able to infer much, while 29 | evaling the code gets all types without much effort. Conditional code paths may 30 | present complications though, so try to avoid them in example code, or if used 31 | you must ensure that all conditional paths are evaluated at least once for 32 | types to resolve. See "Manual labour" for more information. 33 | 34 | I am using : 35 | - Esprima (reading js) 36 | - Escodegen (writing js) 37 | 38 | # Example transpilation 39 | 40 | ## Input 41 | 42 | ```javascript 43 | var app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb }); 44 | /* 45 | console.log(app.constructor.name); 46 | */ 47 | document.body.appendChild(app.view); 48 | 49 | // Scale mode for all textures, will retain pixelation 50 | PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST; 51 | 52 | var sprite = PIXI.Sprite.fromImage('http://pixijs.io/examples/required/assets/basics/bunny.png'); 53 | 54 | // Set the initial position 55 | sprite.anchor.set(0.5); 56 | sprite.x = app.screen.width / 2; 57 | sprite.y = app.screen.height / 2; 58 | 59 | // Opt-in to interactivity 60 | sprite.interactive = true; 61 | 62 | // Shows hand cursor 63 | sprite.buttonMode = true; 64 | 65 | /* PS: Functions are not automatically lifted and must be in order for 66 | * generated script to use them correctly. */ 67 | function onClick(evt) { 68 | /* PS: Make sure your event handlers are called at least once by script */ 69 | console.log(evt); 70 | sprite.scale.x *= 1.25; 71 | sprite.scale.y *= 1.25; 72 | return 0; 73 | } 74 | 75 | // Pointers normalize touch and mouse 76 | sprite.on('pointerdown', onClick); 77 | 78 | /* PS: Make sure your event handlers are called at least once by script, and 79 | * done after function passed around, like in the following line: */ 80 | onClick(new Event('test')); 81 | 82 | // Alternatively, use the mouse & touch events: 83 | // sprite.on('click', onClick); // mouse-only 84 | // sprite.on('tap', onClick); // touch-only 85 | 86 | app.stage.addChild(sprite); 87 | 88 | if (true) { 89 | console.log("hello"); 90 | } else { 91 | console.log("blah"); 92 | } 93 | 94 | var x = 3; 95 | 96 | x *= 2; 97 | ``` 98 | 99 | ## Output 100 | 101 | ReasonML syntax, reformatted with refmt. 102 | 103 | ```ocaml 104 | type appApplicationT; 105 | 106 | type appHTMLDocumentT; 107 | 108 | type appHTMLBodyElementT; 109 | 110 | type appHTMLCanvasElementT; 111 | 112 | type usageFunSpriteT; 113 | 114 | type appSpriteT; 115 | 116 | type appObservablePointT; 117 | 118 | type appRectangleT; 119 | 120 | type appEventT; 121 | 122 | type appMemoryInfoT; 123 | 124 | type appContainerT; 125 | 126 | type smallObject0T = {. "backgroundColor": int}; 127 | 128 | type smallObject21T = {. "RESOLUTION": int}; 129 | 130 | type smallObject42T = { 131 | . 132 | "LINEAR": int, 133 | "NEAREST": int 134 | }; 135 | 136 | type smallObject65T = {. "memory": appMemoryInfoT}; 137 | 138 | type usageFunOnClickT = appEventT => int; 139 | 140 | [@bs.new] [@bs.module "pixi.js"] 141 | external newApplication3 : (int, int, smallObject0T) => appApplicationT = 142 | "Application"; 143 | 144 | [@bs.val] external document : appHTMLDocumentT = "document"; 145 | 146 | [@bs.get] external getBody : appHTMLDocumentT => appHTMLBodyElementT = "body"; 147 | 148 | [@bs.get] external getView : appApplicationT => appHTMLCanvasElementT = "view"; 149 | 150 | [@bs.send] 151 | external appendChild1 : 152 | (appHTMLBodyElementT, appHTMLCanvasElementT) => appHTMLCanvasElementT = 153 | "appendChild"; 154 | 155 | [@bs.val] [@bs.module "pixi.js"] 156 | external getSettings : smallObject21T = "settings"; 157 | 158 | [@bs.set] 159 | external setSCALE_MODE : (smallObject21T, int) => unit = "SCALE_MODE"; 160 | 161 | [@bs.val] [@bs.module "pixi.js"] [@bs.scope "settings"] 162 | external getSCALE_MODE : int = "SCALE_MODE"; 163 | 164 | [@bs.val] [@bs.module "pixi.js"] 165 | external getSCALE_MODES : smallObject42T = "SCALE_MODES"; 166 | 167 | [@bs.val] [@bs.module "pixi.js"] [@bs.scope "SCALE_MODES"] 168 | external getNEAREST : int = "NEAREST"; 169 | 170 | [@bs.val] [@bs.module "pixi.js"] 171 | external getSprite : usageFunSpriteT = "Sprite"; 172 | 173 | [@bs.val] [@bs.module "pixi.js"] [@bs.scope "Sprite"] 174 | external fromImage1 : string => appSpriteT = "fromImage"; 175 | 176 | [@bs.get] external getAnchor : appSpriteT => appObservablePointT = "anchor"; 177 | 178 | [@bs.send] external set1 : (appObservablePointT, float) => unit = "set"; 179 | 180 | [@bs.set] external setX : (appSpriteT, int) => unit = "x"; 181 | 182 | [@bs.get] external getX : appSpriteT => int = "x"; 183 | 184 | [@bs.get] external getScreen : appApplicationT => appRectangleT = "screen"; 185 | 186 | [@bs.get] external getWidth : appRectangleT => int = "width"; 187 | 188 | [@bs.set] external setY : (appSpriteT, int) => unit = "y"; 189 | 190 | [@bs.get] external getY : appSpriteT => int = "y"; 191 | 192 | [@bs.get] external getHeight : appRectangleT => int = "height"; 193 | 194 | [@bs.set] 195 | external setInteractive : (appSpriteT, Js.boolean) => unit = "interactive"; 196 | 197 | [@bs.get] external getInteractive : appSpriteT => Js.boolean = "interactive"; 198 | 199 | [@bs.set] 200 | external setButtonMode : (appSpriteT, Js.boolean) => unit = "buttonMode"; 201 | 202 | [@bs.get] external getButtonMode : appSpriteT => Js.boolean = "buttonMode"; 203 | 204 | [@bs.val] external console : smallObject65T = "console"; 205 | 206 | [@bs.get] external getScale : appSpriteT => appObservablePointT = "scale"; 207 | 208 | [@bs.set] 209 | external setXappObservablePointTfloat : (appObservablePointT, float) => unit = 210 | "x"; 211 | 212 | [@bs.get] 213 | external getXappObservablePointT : appObservablePointT => float = "x"; 214 | 215 | [@bs.set] 216 | external setYappObservablePointTfloat : (appObservablePointT, float) => unit = 217 | "y"; 218 | 219 | [@bs.get] 220 | external getYappObservablePointT : appObservablePointT => float = "y"; 221 | 222 | [@bs.send] 223 | external on2 : (appSpriteT, string, usageFunOnClickT) => appSpriteT = "on"; 224 | 225 | [@bs.new] external newEvent1 : string => appEventT = "Event"; 226 | 227 | [@bs.get] external getStage : appApplicationT => appContainerT = "stage"; 228 | 229 | [@bs.send] 230 | external addChild1 : (appContainerT, appSpriteT) => appSpriteT = "addChild"; 231 | 232 | let app = newApplication3(800, 600, {"backgroundColor": 0x1099bb}); 233 | 234 | /* 235 | console.log(app.constructor.name); 236 | */ 237 | document |. getBody |. appendChild1(app |. getView); 238 | 239 | /* Scale mode for all textures, will retain pixelation */ 240 | setSCALE_MODE(getSettings, getNEAREST); 241 | 242 | let sprite = 243 | fromImage1("http://pixijs.io/examples/required/assets/basics/bunny.png"); 244 | 245 | /* Set the initial position */ 246 | sprite |. getAnchor |. set1(0.5); 247 | 248 | setX(sprite, (app |. getScreen |. getWidth) / 2); 249 | 250 | setY(sprite, (app |. getScreen |. getHeight) / 2); 251 | 252 | /* Opt-in to interactivity */ 253 | setInteractive(sprite, Js.true_); 254 | 255 | /* Shows hand cursor */ 256 | setButtonMode(sprite, Js.true_); 257 | 258 | /* PS: Functions are not automatically lifted and must be in order for 259 | * generated script to use them correctly. */ 260 | let onClick = evt => { 261 | /* PS: Make sure your event handlers are called at least once by script */ 262 | Js.log(evt); 263 | setXappObservablePointTfloat( 264 | sprite |. getScale, 265 | (sprite |. getScale |. getXappObservablePointT) *. 1.25 266 | ); 267 | setYappObservablePointTfloat( 268 | sprite |. getScale, 269 | (sprite |. getScale |. getYappObservablePointT) *. 1.25 270 | ); 271 | 0; 272 | }; 273 | 274 | /* Pointers normalize touch and mouse */ 275 | sprite |. on2("pointerdown", onClick); 276 | 277 | /* PS: Make sure your event handlers are called at least once by script, and 278 | * done after function passed around, like in the following line: */ 279 | onClick(newEvent1("test")); 280 | 281 | /* Alternatively, use the mouse & touch events: 282 | sprite.on('click', onClick); // mouse-only 283 | sprite.on('tap', onClick); // touch-only */ 284 | app |. getStage |. addChild1(sprite); 285 | 286 | if (Js.to_bool(Js.true_)) { 287 | Js.log("hello"); 288 | } else { 289 | Js.log("blah"); 290 | }; 291 | 292 | let xRef = ref(3); 293 | 294 | xRef := xRef^ * 2; 295 | ``` 296 | 297 | # Manual labour 298 | 299 | This section lists workarounds for unimplemented features and transpilations. 300 | 301 | - It is up to you to ensure that all branches of if statements are evaluated 302 | at least once to get the types. 303 | - Control flow keywords like continue and break are not supported yet. Early 304 | return is not supported either: there should only be a single return 305 | statement at end of function. 306 | - Initialize all (non-int) variables. Default value is set to 0 if not 307 | initialized and a TODO comment is added. 308 | - Reorder functions so that they are called after they are declared. 309 | - Tweak integer values that should be floats, e.g. write 0.5 + 0.5 instead of 310 | 1 if you want the value to be considered float. 311 | - Call event handlers manually at least once, after they've been passed around 312 | to event registers. Alternatively, set a high timeout and 313 | trigger events manually in browser. 314 | - By default there is a 10 second timeout to allow for resource load, 315 | timer updates etc when evaluating example code. If all types are resolved 316 | before the grace period is done, transpilation proceeds at once. Adjust 317 | period in index.js if needed. TODO: create option for this on web page. 318 | 319 | After transpile: 320 | - Reorder type definitions if necessary. There is a TODO issue on sorting them 321 | topologically. 322 | - Add |> ignore or let _ = to avoid warnings. I don't do it automatically 323 | because it will be hard to detect when it's necessary and too many of them 324 | clutters the code. 325 | 326 | # Testing examples 327 | 328 | ## Node example 329 | 330 | Node support is basic so far, but an example can be found in 331 | src/example-node.txt. 332 | 333 | To run the example: 334 | 335 | ```bash 336 | npm run webpack # to compile dist/node.js 337 | node dist/node.js # will transpile src/example-node.txt to src/TestNode.re 338 | npm start # to compile src/TestNode.re 339 | node src/TestNode.bs.js 340 | ``` 341 | 342 | ## Browser examples 343 | 344 | ```bash 345 | node src/puppet.js examples/pixiBasics/example_001.js >| src/Test.re 346 | npm start 347 | ``` 348 | 349 | ### Caveats 350 | - Example 4. Need to add a |> ignore at end of function. 351 | - Example 9. Need to add a |> ignore at end of function. 352 | 353 | Go to http://localhost:8080/test . 354 | 355 | ## Running tests 356 | 357 | ```bash 358 | # run tests script 359 | npm run test 360 | ``` 361 | 362 | # Supported syntax 363 | 364 | This list of ESprima syntax nodes is from 365 | [here](https://github.com/jquery/esprima/blob/master/src/syntax.ts) and 366 | annotated with whether transpilation is implemented or not yet. Create an issue 367 | if you want a syntax implemented. 368 | 369 | - YES: YES 370 | - NO: NO 371 | 372 | Feature | Supported 373 | --- | --- 374 | AssignmentExpression | YES 375 | AssignmentPattern | NO 376 | ArrayExpression | YES 377 | ArrayPattern | NO 378 | ArrowFunctionExpression | NO 379 | AwaitExpression | NO 380 | BlockStatement | YES 381 | BinaryExpression | YES 382 | BreakStatement | NO 383 | CallExpression | YES 384 | CatchClause | NO 385 | ClassBody | NO 386 | ClassDeclaration | NO 387 | ClassExpression | NO 388 | ConditionalExpression | YES 389 | ContinueStatement | NO 390 | DoWhileStatement | NO 391 | DebuggerStatement | NO 392 | EmptyStatement | NO 393 | ExportAllDeclaration | NO 394 | ExportDefaultDeclaration | NO 395 | ExportNamedDeclaration | NO 396 | ExportSpecifier | NO 397 | ExpressionStatement | YES 398 | ForStatement | YES 399 | ForOfStatement | NO 400 | ForInStatement | NO 401 | FunctionDeclaration | YES 402 | FunctionExpression | YES 403 | Identifier | YES 404 | IfStatement | YES 405 | Import | NO 406 | ImportDeclaration | NO 407 | ImportDefaultSpecifier | NO 408 | ImportNamespaceSpecifier | NO 409 | ImportSpecifier | NO 410 | Literal | YES 411 | LabeledStatement | NO 412 | LogicalExpression | NO 413 | MemberExpression | YES 414 | MetaProperty | NO 415 | MethodDefinition | NO 416 | NewExpression | YES 417 | ObjectExpression | YES 418 | ObjectPattern | NO 419 | Program | YES 420 | Property | YES 421 | RestElement | NO 422 | ReturnStatement | YES 423 | SequenceExpression | NO 424 | SpreadElement | NO 425 | Super | NO 426 | SwitchCase | NO 427 | SwitchStatement | NO 428 | TaggedTemplateExpression | NO 429 | TemplateElement | NO 430 | TemplateLiteral | NO 431 | ThisExpression | NO 432 | ThrowStatement | NO 433 | TryStatement | NO 434 | UnaryExpression | YES 435 | UpdateExpression | YES 436 | VariableDeclaration | YES 437 | VariableDeclarator | YES 438 | WhileStatement | NO 439 | WithStatement | NO 440 | YieldExpression | NO 441 | 442 | # Alternatives 443 | 444 | - [Jeason](https://github.com/chenglou/jeason) is another approach using Flow. 445 | Differences to my project are that flow cannot really infer many types at 446 | all without annotations. The code Jeason generates is also full of dynamic 447 | lookups, not using typed getters and setters as my project does. Also it is 448 | not as convenient to copy paste and quickly transpile live examples in 449 | browser. 450 | - [ReasonablyTyped](https://github.com/rrdelaney/ReasonablyTyped) I tried this 451 | a while ago to convert WebGL2 bindings (and three.js if I remember 452 | correctly) but I couldn't get it to work. Well, seems like it's a work in 453 | progress with last commit 4 days ago per 03.04.2018. 454 | -------------------------------------------------------------------------------- /bsconfig.json: -------------------------------------------------------------------------------- 1 | // This is the configuration file used by BuckleScript's build system bsb. Its documentation lives here: http://bucklescript.github.io/bucklescript/docson/#build-schema.json 2 | // BuckleScript comes with its own parser for bsconfig.json, which is normal JSON, with the extra support of comments and trailing commas. 3 | { 4 | "name": "js-to-reasonml-transpiler", 5 | "version": "0.1.0", 6 | "sources": { 7 | "dir" : "src", 8 | "subdirs" : true 9 | }, 10 | "package-specs": { 11 | "module": "commonjs", 12 | "in-source": true 13 | }, 14 | "suffix": ".bs.js", 15 | "bs-dependencies": [ 16 | // add your dependencies here. You'd usually install them normally through `npm install my-dependency`. If my-dependency has a bsconfig.json too, then everything will work seamlessly. 17 | ], 18 | "warnings": { 19 | "error" : "+101" 20 | }, 21 | "namespace": true, 22 | "refmt": 3 23 | } 24 | -------------------------------------------------------------------------------- /css/codemirror.css: -------------------------------------------------------------------------------- 1 | /* BASICS */ 2 | 3 | .CodeMirror { 4 | /* Set height, width, borders, and global font properties here */ 5 | font-family: monospace; 6 | height: 300px; 7 | color: black; 8 | direction: ltr; 9 | } 10 | 11 | /* PADDING */ 12 | 13 | .CodeMirror-lines { 14 | padding: 4px 0; /* Vertical padding around content */ 15 | } 16 | .CodeMirror pre { 17 | padding: 0 4px; /* Horizontal padding of content */ 18 | } 19 | 20 | .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { 21 | background-color: white; /* The little square between H and V scrollbars */ 22 | } 23 | 24 | /* GUTTER */ 25 | 26 | .CodeMirror-gutters { 27 | border-right: 1px solid #ddd; 28 | background-color: #f7f7f7; 29 | white-space: nowrap; 30 | } 31 | .CodeMirror-linenumbers {} 32 | .CodeMirror-linenumber { 33 | padding: 0 3px 0 5px; 34 | min-width: 20px; 35 | text-align: right; 36 | color: #999; 37 | white-space: nowrap; 38 | } 39 | 40 | .CodeMirror-guttermarker { color: black; } 41 | .CodeMirror-guttermarker-subtle { color: #999; } 42 | 43 | /* CURSOR */ 44 | 45 | .CodeMirror-cursor { 46 | border-left: 1px solid black; 47 | border-right: none; 48 | width: 0; 49 | } 50 | /* Shown when moving in bi-directional text */ 51 | .CodeMirror div.CodeMirror-secondarycursor { 52 | border-left: 1px solid silver; 53 | } 54 | .cm-fat-cursor .CodeMirror-cursor { 55 | width: auto; 56 | border: 0 !important; 57 | background: #7e7; 58 | } 59 | .cm-fat-cursor div.CodeMirror-cursors { 60 | z-index: 1; 61 | } 62 | .cm-fat-cursor-mark { 63 | background-color: rgba(20, 255, 20, 0.5); 64 | -webkit-animation: blink 1.06s steps(1) infinite; 65 | -moz-animation: blink 1.06s steps(1) infinite; 66 | animation: blink 1.06s steps(1) infinite; 67 | } 68 | .cm-animate-fat-cursor { 69 | width: auto; 70 | border: 0; 71 | -webkit-animation: blink 1.06s steps(1) infinite; 72 | -moz-animation: blink 1.06s steps(1) infinite; 73 | animation: blink 1.06s steps(1) infinite; 74 | background-color: #7e7; 75 | } 76 | @-moz-keyframes blink { 77 | 0% {} 78 | 50% { background-color: transparent; } 79 | 100% {} 80 | } 81 | @-webkit-keyframes blink { 82 | 0% {} 83 | 50% { background-color: transparent; } 84 | 100% {} 85 | } 86 | @keyframes blink { 87 | 0% {} 88 | 50% { background-color: transparent; } 89 | 100% {} 90 | } 91 | 92 | /* Can style cursor different in overwrite (non-insert) mode */ 93 | .CodeMirror-overwrite .CodeMirror-cursor {} 94 | 95 | .cm-tab { display: inline-block; text-decoration: inherit; } 96 | 97 | .CodeMirror-rulers { 98 | position: absolute; 99 | left: 0; right: 0; top: -50px; bottom: -20px; 100 | overflow: hidden; 101 | } 102 | .CodeMirror-ruler { 103 | border-left: 1px solid #ccc; 104 | top: 0; bottom: 0; 105 | position: absolute; 106 | } 107 | 108 | /* DEFAULT THEME */ 109 | 110 | .cm-s-default .cm-header {color: blue;} 111 | .cm-s-default .cm-quote {color: #090;} 112 | .cm-negative {color: #d44;} 113 | .cm-positive {color: #292;} 114 | .cm-header, .cm-strong {font-weight: bold;} 115 | .cm-em {font-style: italic;} 116 | .cm-link {text-decoration: underline;} 117 | .cm-strikethrough {text-decoration: line-through;} 118 | 119 | .cm-s-default .cm-keyword {color: #708;} 120 | .cm-s-default .cm-atom {color: #219;} 121 | .cm-s-default .cm-number {color: #164;} 122 | .cm-s-default .cm-def {color: #00f;} 123 | .cm-s-default .cm-variable, 124 | .cm-s-default .cm-punctuation, 125 | .cm-s-default .cm-property, 126 | .cm-s-default .cm-operator {} 127 | .cm-s-default .cm-variable-2 {color: #05a;} 128 | .cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;} 129 | .cm-s-default .cm-comment {color: #a50;} 130 | .cm-s-default .cm-string {color: #a11;} 131 | .cm-s-default .cm-string-2 {color: #f50;} 132 | .cm-s-default .cm-meta {color: #555;} 133 | .cm-s-default .cm-qualifier {color: #555;} 134 | .cm-s-default .cm-builtin {color: #30a;} 135 | .cm-s-default .cm-bracket {color: #997;} 136 | .cm-s-default .cm-tag {color: #170;} 137 | .cm-s-default .cm-attribute {color: #00c;} 138 | .cm-s-default .cm-hr {color: #999;} 139 | .cm-s-default .cm-link {color: #00c;} 140 | 141 | .cm-s-default .cm-error {color: #f00;} 142 | .cm-invalidchar {color: #f00;} 143 | 144 | .CodeMirror-composing { border-bottom: 2px solid; } 145 | 146 | /* Default styles for common addons */ 147 | 148 | div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;} 149 | div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;} 150 | .CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); } 151 | .CodeMirror-activeline-background {background: #e8f2ff;} 152 | 153 | /* STOP */ 154 | 155 | /* The rest of this file contains styles related to the mechanics of 156 | the editor. You probably shouldn't touch them. */ 157 | 158 | .CodeMirror { 159 | position: relative; 160 | overflow: hidden; 161 | background: white; 162 | } 163 | 164 | .CodeMirror-scroll { 165 | overflow: scroll !important; /* Things will break if this is overridden */ 166 | /* 30px is the magic margin used to hide the element's real scrollbars */ 167 | /* See overflow: hidden in .CodeMirror */ 168 | margin-bottom: -30px; margin-right: -30px; 169 | padding-bottom: 30px; 170 | height: 100%; 171 | outline: none; /* Prevent dragging from highlighting the element */ 172 | position: relative; 173 | } 174 | .CodeMirror-sizer { 175 | position: relative; 176 | border-right: 30px solid transparent; 177 | } 178 | 179 | /* The fake, visible scrollbars. Used to force redraw during scrolling 180 | before actual scrolling happens, thus preventing shaking and 181 | flickering artifacts. */ 182 | .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { 183 | position: absolute; 184 | z-index: 6; 185 | display: none; 186 | } 187 | .CodeMirror-vscrollbar { 188 | right: 0; top: 0; 189 | overflow-x: hidden; 190 | overflow-y: scroll; 191 | } 192 | .CodeMirror-hscrollbar { 193 | bottom: 0; left: 0; 194 | overflow-y: hidden; 195 | overflow-x: scroll; 196 | } 197 | .CodeMirror-scrollbar-filler { 198 | right: 0; bottom: 0; 199 | } 200 | .CodeMirror-gutter-filler { 201 | left: 0; bottom: 0; 202 | } 203 | 204 | .CodeMirror-gutters { 205 | position: absolute; left: 0; top: 0; 206 | min-height: 100%; 207 | z-index: 3; 208 | } 209 | .CodeMirror-gutter { 210 | white-space: normal; 211 | height: 100%; 212 | display: inline-block; 213 | vertical-align: top; 214 | margin-bottom: -30px; 215 | } 216 | .CodeMirror-gutter-wrapper { 217 | position: absolute; 218 | z-index: 4; 219 | background: none !important; 220 | border: none !important; 221 | } 222 | .CodeMirror-gutter-background { 223 | position: absolute; 224 | top: 0; bottom: 0; 225 | z-index: 4; 226 | } 227 | .CodeMirror-gutter-elt { 228 | position: absolute; 229 | cursor: default; 230 | z-index: 4; 231 | } 232 | .CodeMirror-gutter-wrapper ::selection { background-color: transparent } 233 | .CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent } 234 | 235 | .CodeMirror-lines { 236 | cursor: text; 237 | min-height: 1px; /* prevents collapsing before first draw */ 238 | } 239 | .CodeMirror pre { 240 | /* Reset some styles that the rest of the page might have set */ 241 | -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; 242 | border-width: 0; 243 | background: transparent; 244 | font-family: inherit; 245 | font-size: inherit; 246 | margin: 0; 247 | white-space: pre; 248 | word-wrap: normal; 249 | line-height: inherit; 250 | color: inherit; 251 | z-index: 2; 252 | position: relative; 253 | overflow: visible; 254 | -webkit-tap-highlight-color: transparent; 255 | -webkit-font-variant-ligatures: contextual; 256 | font-variant-ligatures: contextual; 257 | } 258 | .CodeMirror-wrap pre { 259 | word-wrap: break-word; 260 | white-space: pre-wrap; 261 | word-break: normal; 262 | } 263 | 264 | .CodeMirror-linebackground { 265 | position: absolute; 266 | left: 0; right: 0; top: 0; bottom: 0; 267 | z-index: 0; 268 | } 269 | 270 | .CodeMirror-linewidget { 271 | position: relative; 272 | z-index: 2; 273 | padding: 0.1px; /* Force widget margins to stay inside of the container */ 274 | } 275 | 276 | .CodeMirror-widget {} 277 | 278 | .CodeMirror-rtl pre { direction: rtl; } 279 | 280 | .CodeMirror-code { 281 | outline: none; 282 | } 283 | 284 | /* Force content-box sizing for the elements where we expect it */ 285 | .CodeMirror-scroll, 286 | .CodeMirror-sizer, 287 | .CodeMirror-gutter, 288 | .CodeMirror-gutters, 289 | .CodeMirror-linenumber { 290 | -moz-box-sizing: content-box; 291 | box-sizing: content-box; 292 | } 293 | 294 | .CodeMirror-measure { 295 | position: absolute; 296 | width: 100%; 297 | height: 0; 298 | overflow: hidden; 299 | visibility: hidden; 300 | } 301 | 302 | .CodeMirror-cursor { 303 | position: absolute; 304 | pointer-events: none; 305 | } 306 | .CodeMirror-measure pre { position: static; } 307 | 308 | div.CodeMirror-cursors { 309 | visibility: hidden; 310 | position: relative; 311 | z-index: 3; 312 | } 313 | div.CodeMirror-dragcursors { 314 | visibility: visible; 315 | } 316 | 317 | .CodeMirror-focused div.CodeMirror-cursors { 318 | visibility: visible; 319 | } 320 | 321 | .CodeMirror-selected { background: #d9d9d9; } 322 | .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } 323 | .CodeMirror-crosshair { cursor: crosshair; } 324 | .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; } 325 | .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; } 326 | 327 | .cm-searching { 328 | background-color: #ffa; 329 | background-color: rgba(255, 255, 0, .4); 330 | } 331 | 332 | /* Used to force a border model for a node */ 333 | .cm-force-border { padding-right: .1px; } 334 | 335 | @media print { 336 | /* Hide the cursor when printing */ 337 | .CodeMirror div.CodeMirror-cursors { 338 | visibility: hidden; 339 | } 340 | } 341 | 342 | /* See issue #2901 */ 343 | .cm-tab-wrap-hack:after { content: ''; } 344 | 345 | /* Help users use markselection to safely style text background */ 346 | span.CodeMirror-selectedtext { background: none; } 347 | 348 | /* Added by emh */ 349 | .CodeMirror, .CodeMirror-scroll { 350 | height: auto; 351 | } 352 | 353 | .CodeMirror-code .marked { 354 | border: 1px solid red; 355 | line-height: 1.5em; 356 | } 357 | -------------------------------------------------------------------------------- /examples/pixiBasics/example_001.js: -------------------------------------------------------------------------------- 1 | var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb}); 2 | document.body.appendChild(app.view); 3 | 4 | // create a new Sprite from an image path 5 | var bunny = PIXI.Sprite.fromImage('http://pixijs.io/examples/required/assets/basics/bunny.png') 6 | 7 | // center the sprite's anchor point 8 | bunny.anchor.set(0.5); 9 | 10 | // move the sprite to the center of the screen 11 | bunny.x = app.screen.width / 2; 12 | bunny.y = app.screen.height / 2; 13 | 14 | app.stage.addChild(bunny); 15 | 16 | var rotation = function(delta) { 17 | // just for fun, let's rotate mr rabbit a little 18 | // delta is 1 if running at 100% performance 19 | // creates frame-independent transformation 20 | bunny.rotation += 0.1 * delta; 21 | }; 22 | rotation(0.01); 23 | 24 | // Listen for animate update 25 | app.ticker.add(rotation); 26 | -------------------------------------------------------------------------------- /examples/pixiBasics/example_002.js: -------------------------------------------------------------------------------- 1 | var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb}); 2 | document.body.appendChild(app.view); 3 | 4 | var container = new PIXI.Container(); 5 | 6 | app.stage.addChild(container); 7 | 8 | var texture = PIXI.Texture.fromImage('http://pixijs.io/examples/required/assets/basics/bunny.png'); 9 | 10 | // Create a 5x5 grid of bunnies 11 | for (var i = 0; i < 25; i++) { 12 | var bunny = new PIXI.Sprite(texture); 13 | bunny.anchor.set(0.5); 14 | bunny.x = (i % 5) * 40; 15 | bunny.y = Math.floor(i / 5) * 40; 16 | container.addChild(bunny); 17 | } 18 | 19 | // Center on the screen 20 | container.x = (app.screen.width - container.width) / 2; 21 | container.y = (app.screen.height - container.height) / 2; 22 | -------------------------------------------------------------------------------- /examples/pixiBasics/example_003.js: -------------------------------------------------------------------------------- 1 | var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb}); 2 | document.body.appendChild(app.view); 3 | 4 | var container = new PIXI.Container(); 5 | 6 | app.stage.addChild(container); 7 | 8 | // Create a new texture 9 | var texture = PIXI.Texture.fromImage('http://pixijs.io/examples/required/assets/basics/bunny.png'); 10 | 11 | // Create a 5x5 grid of bunnies 12 | for (var i = 0; i < 25; i++) { 13 | var bunny = new PIXI.Sprite(texture); 14 | bunny.anchor.set(0.5); 15 | bunny.x = (i % 5) * 40; 16 | bunny.y = Math.floor(i / 5) * 40; 17 | container.addChild(bunny); 18 | } 19 | 20 | // Move container to the center 21 | container.x = app.screen.width / 2; 22 | container.y = app.screen.height / 2; 23 | 24 | // Center bunny sprite in local container coordinates 25 | container.pivot.x = container.width / 2; 26 | container.pivot.y = container.height / 2; 27 | 28 | // Listen for animate update 29 | app.ticker.add(function(delta) { 30 | // rotate the container! 31 | // use delta to create frame-independent transform 32 | container.rotation -= 0.01 * delta; 33 | }); 34 | -------------------------------------------------------------------------------- /examples/pixiBasics/example_004.js: -------------------------------------------------------------------------------- 1 | var app = new PIXI.Application(); 2 | document.body.appendChild(app.view); 3 | 4 | function onAssetsLoaded() 5 | { 6 | // create an array of textures from an image path 7 | var frames = []; 8 | 9 | for (var i = 0; i < 30; i++) { 10 | var val = i < 10 ? '0' + i : '' + i; 11 | 12 | // magically works since the spritesheet was loaded with the pixi loader 13 | frames.push(PIXI.Texture.fromFrame('rollSequence00' + val + '.png')); 14 | } 15 | 16 | // create an AnimatedSprite (brings back memories from the days of Flash, right ?) 17 | var anim = new PIXI.extras.AnimatedSprite(frames); 18 | 19 | /* 20 | * An AnimatedSprite inherits all the properties of a PIXI sprite 21 | * so you can change its position, its anchor, mask it, etc 22 | */ 23 | anim.x = app.screen.width / 2; 24 | anim.y = app.screen.height / 2; 25 | anim.anchor.set(0.5); 26 | anim.animationSpeed = 0.5; 27 | anim.play(); 28 | 29 | app.stage.addChild(anim); 30 | 31 | // Animate the rotation 32 | app.ticker.add(function(delta) { 33 | anim.rotation += 0.01; 34 | }); 35 | } 36 | 37 | PIXI.loader 38 | .add('http://pixijs.io/examples/required/assets/basics/fighter.json') 39 | .load(onAssetsLoaded); 40 | -------------------------------------------------------------------------------- /examples/pixiBasics/example_005.js: -------------------------------------------------------------------------------- 1 | var app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb }); 2 | /* 3 | console.log(app.constructor.name); 4 | */ 5 | document.body.appendChild(app.view); 6 | 7 | // Scale mode for all textures, will retain pixelation 8 | PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST; 9 | 10 | var sprite = PIXI.Sprite.fromImage('http://pixijs.io/examples/required/assets/basics/bunny.png'); 11 | 12 | // Set the initial position 13 | sprite.anchor.set(0.5); 14 | sprite.x = app.screen.width / 2; 15 | sprite.y = app.screen.height / 2; 16 | 17 | // Opt-in to interactivity 18 | sprite.interactive = true; 19 | 20 | // Shows hand cursor 21 | sprite.buttonMode = true; 22 | 23 | /* PS: Functions are not automatically lifted and must be in order for 24 | * generated script to use them correctly. */ 25 | function onClick(evt) { 26 | /* PS: Make sure your event handlers are called at least once by script */ 27 | console.log(evt); 28 | sprite.scale.x *= 1.25; 29 | sprite.scale.y *= 1.25; 30 | return 0; 31 | } 32 | 33 | // Pointers normalize touch and mouse 34 | sprite.on('pointerdown', onClick); 35 | 36 | /* PS: Make sure your event handlers are called at least once by script, and 37 | * done after function passed around, like in the following line: */ 38 | onClick(new Event('test')); 39 | 40 | // Alternatively, use the mouse & touch events: 41 | // sprite.on('click', onClick); // mouse-only 42 | // sprite.on('tap', onClick); // touch-only 43 | 44 | app.stage.addChild(sprite); 45 | 46 | 47 | var x = 3; 48 | 49 | x *= 2; 50 | -------------------------------------------------------------------------------- /examples/pixiBasics/example_006.js: -------------------------------------------------------------------------------- 1 | var app = new PIXI.Application(); 2 | document.body.appendChild(app.view); 3 | 4 | // create a texture from an image path 5 | var texture = PIXI.Texture.fromImage('http://pixijs.io/examples/required/assets/p2.jpeg'); 6 | 7 | /* create a tiling sprite ... 8 | * requires a texture, a width and a height 9 | * in WebGL the image size should preferably be a power of two 10 | */ 11 | var tilingSprite = new PIXI.extras.TilingSprite( 12 | texture, 13 | app.screen.width, 14 | app.screen.height 15 | ); 16 | app.stage.addChild(tilingSprite); 17 | 18 | var count = 0.005; 19 | 20 | app.ticker.add(function() { 21 | 22 | count += 0.005; 23 | 24 | tilingSprite.tileScale.x = 2 + Math.sin(count); 25 | tilingSprite.tileScale.y = 2 + Math.cos(count); 26 | 27 | tilingSprite.tilePosition.x += 1; 28 | tilingSprite.tilePosition.y += 1; 29 | }); 30 | -------------------------------------------------------------------------------- /examples/pixiBasics/example_007.js: -------------------------------------------------------------------------------- 1 | var app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb}); 2 | document.body.appendChild(app.view); 3 | 4 | var basicText = new PIXI.Text('Basic text in pixi'); 5 | basicText.x = 30; 6 | basicText.y = 90; 7 | 8 | app.stage.addChild(basicText); 9 | 10 | var style = new PIXI.TextStyle({ 11 | fontFamily: 'Arial', 12 | fontSize: 36, 13 | fontStyle: 'italic', 14 | fontWeight: 'bold', 15 | fill: ['#ffffff', '#00ff99'], // gradient 16 | stroke: '#4a1850', 17 | strokeThickness: 5, 18 | dropShadow: true, 19 | dropShadowColor: '#000000', 20 | dropShadowBlur: 4, 21 | dropShadowAngle: Math.PI / 6, 22 | dropShadowDistance: 6, 23 | wordWrap: true, 24 | wordWrapWidth: 440 25 | }); 26 | 27 | var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines', style); 28 | richText.x = 30; 29 | richText.y = 180; 30 | 31 | app.stage.addChild(richText); 32 | -------------------------------------------------------------------------------- /examples/pixiBasics/example_008.js: -------------------------------------------------------------------------------- 1 | var app = new PIXI.Application(800, 600, { antialias: true }); 2 | document.body.appendChild(app.view); 3 | 4 | var graphics = new PIXI.Graphics(); 5 | 6 | // set a fill and line style 7 | graphics.beginFill(0xFF3300); 8 | graphics.lineStyle(4, 0xffd900, 1); 9 | 10 | // draw a shape 11 | graphics.moveTo(50,50); 12 | graphics.lineTo(250, 50); 13 | graphics.lineTo(100, 100); 14 | graphics.lineTo(50, 50); 15 | graphics.endFill(); 16 | 17 | // set a fill and a line style again and draw a rectangle 18 | graphics.lineStyle(2, 0x0000FF, 1); 19 | graphics.beginFill(0xFF700B, 1.01); 20 | graphics.drawRect(50, 250, 120, 120); 21 | 22 | // draw a rounded rectangle 23 | graphics.lineStyle(2, 0xFF00FF, 1); 24 | graphics.beginFill(0xFF00BB, 0.25); 25 | graphics.drawRoundedRect(150, 450, 300, 100, 15); 26 | graphics.endFill(); 27 | 28 | // draw a circle, set the lineStyle to zero so the circle doesn't have an outline 29 | graphics.lineStyle(0); 30 | graphics.beginFill(0xFFFF0B, 0.5); 31 | graphics.drawCircle(470, 90,60); 32 | graphics.endFill(); 33 | 34 | app.stage.addChild(graphics); 35 | -------------------------------------------------------------------------------- /examples/pixiBasics/example_009.js: -------------------------------------------------------------------------------- 1 | var app = new PIXI.Application(800, 600, { transparent: true }); 2 | document.body.appendChild(app.view); 3 | 4 | // Create play button that can be used to trigger the video 5 | var button = new PIXI.Graphics() 6 | .beginFill(0x0, 0.5) 7 | .drawRoundedRect(0, 0, 100, 100, 10) 8 | .endFill() 9 | .beginFill(0xffffff) 10 | .moveTo(36, 30) 11 | .lineTo(36, 70) 12 | .lineTo(70, 50); 13 | 14 | // Position the button 15 | button.x = (app.screen.width - button.width) / 2; 16 | button.y = (app.screen.height - button.height) / 2; 17 | 18 | // Enable interactivity on the button 19 | button.interactive = true; 20 | button.buttonMode = true; 21 | 22 | // Add to the stage 23 | app.stage.addChild(button); 24 | 25 | function onPlayVideo() { 26 | 27 | // Don't need the button anymore 28 | button.destroy(); 29 | 30 | // create a video texture from a path 31 | var texture = PIXI.Texture.fromVideo('http://pixijs.io/examples/required/assets/testVideo.mp4'); 32 | 33 | // create a new Sprite using the video texture (yes it's that easy) 34 | var videoSprite = new PIXI.Sprite(texture); 35 | 36 | // Stetch the fullscreen 37 | videoSprite.width = app.screen.width; 38 | videoSprite.height = app.screen.height; 39 | 40 | app.stage.addChild(videoSprite); 41 | } 42 | 43 | // Listen for a click/tap event to start playing the video 44 | // this is useful for some mobile platforms. For example: 45 | // ios9 and under cannot render videos in PIXI without a 46 | // polyfill - https://github.com/bfred-it/iphone-inline-video 47 | // ios10 and above require a click/tap event to render videos 48 | // that contain audio in PIXI. Videos with no audio track do 49 | // not have this requirement 50 | button.on('pointertap', onPlayVideo); 51 | 52 | onPlayVideo(); 53 | -------------------------------------------------------------------------------- /examples/pixiBasics/example_010.js: -------------------------------------------------------------------------------- 1 | var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb}); 2 | document.body.appendChild(app.view); 3 | 4 | var container = new PIXI.Container(); 5 | app.stage.addChild(container); 6 | 7 | var texture = PIXI.Texture.fromImage('http://pixijs.io/examples/required/assets/basics/bunny.png'); 8 | 9 | for (var i = 0; i < 25; i++) { 10 | var bunny = new PIXI.Sprite(texture); 11 | bunny.x = (i % 5) * 30; 12 | bunny.y = Math.floor(i / 5) * 30; 13 | bunny.rotation = Math.random() * (Math.PI * 2) 14 | container.addChild(bunny); 15 | } 16 | 17 | var brt = new PIXI.BaseRenderTexture(300, 300, PIXI.SCALE_MODES.LINEAR, 1); 18 | var rt = new PIXI.RenderTexture(brt); 19 | 20 | var sprite = new PIXI.Sprite(rt); 21 | 22 | sprite.x = 450; 23 | sprite.y = 60; 24 | app.stage.addChild(sprite); 25 | 26 | /* 27 | * All the bunnies are added to the container with the addChild method 28 | * when you do this, all the bunnies become children of the container, and when a container moves, 29 | * so do all its children. 30 | * This gives you a lot of flexibility and makes it easier to position elements on the screen 31 | */ 32 | container.x = 100; 33 | container.y = 60; 34 | 35 | app.ticker.add(function() { 36 | app.renderer.render(container, rt); 37 | }); 38 | -------------------------------------------------------------------------------- /examples/pixiBasics/example_011.js: -------------------------------------------------------------------------------- 1 | var app = new PIXI.Application(); 2 | document.body.appendChild(app.view); 3 | 4 | var count = 0.1; 5 | 6 | // build a rope! 7 | var ropeLength = 45; 8 | 9 | var points = []; 10 | 11 | for (var i = 0; i < 25; i++) { 12 | points.push(new PIXI.Point(i * ropeLength, 0)); 13 | } 14 | 15 | var strip = new PIXI.mesh.Rope(PIXI.Texture.fromImage('http://pixijs.io/examples/required/assets/snake.png'), points); 16 | 17 | strip.x = -40; 18 | strip.y = 300; 19 | 20 | app.stage.addChild(strip); 21 | 22 | var g = new PIXI.Graphics(); 23 | g.x = strip.x; 24 | g.y = strip.y; 25 | app.stage.addChild(g); 26 | 27 | function renderPoints () { 28 | 29 | g.clear(); 30 | 31 | g.lineStyle(2,0xffc2c2); 32 | g.moveTo(points[0].x,points[0].y); 33 | 34 | for (var i = 1; i < points.length; i++) { 35 | g.lineTo(points[i].x,points[i].y); 36 | } 37 | 38 | for (var i = 1; i < points.length; i++) { 39 | g.beginFill(0xff0022); 40 | g.drawCircle(points[i].x,points[i].y,10); 41 | g.endFill(); 42 | } 43 | } 44 | 45 | // start animating 46 | app.ticker.add(function() { 47 | 48 | count += 0.1; 49 | 50 | // make the snake 51 | for (var i = 0; i < points.length; i++) { 52 | points[i].y = Math.sin((i * 0.6) + count) * 30; 53 | points[i].x = i * ropeLength + Math.cos((i * 0.3) + count) * 20; 54 | } 55 | renderPoints(); 56 | }); 57 | 58 | -------------------------------------------------------------------------------- /examples/pixiBasics/example_012.js: -------------------------------------------------------------------------------- 1 | var app = new PIXI.Application(); 2 | document.body.appendChild(app.view); 3 | 4 | // Create background image 5 | var background = PIXI.Sprite.fromImage("http://pixijs.io/examples/required/assets/bkg-grass.jpg"); 6 | background.width = app.screen.width; 7 | background.height = app.screen.height; 8 | app.stage.addChild(background); 9 | 10 | // Stop application wait for load to finish 11 | app.stop(); 12 | 13 | var filter = new PIXI.Filter(null, null); 14 | 15 | // Handle the load completed 16 | function onLoaded (loader,res) { 17 | 18 | // Create the new filter, arguments: (vertexShader, framentSource) 19 | filter = new PIXI.Filter(null, res.shader.data); 20 | 21 | // Add the filter 22 | /* Workaround for refmt bug https://github.com/facebook/reason/issues/1895 */ 23 | var filter2 = filter; 24 | background.filters = [filter2]; 25 | 26 | // Resume application update 27 | app.start(); 28 | } 29 | 30 | PIXI.loader.add('shader', 'http://pixijs.io/examples/required/assets/basics/shader.frag') 31 | .load(onLoaded); 32 | 33 | // Animate the filter 34 | app.ticker.add(function(delta) { 35 | filter.uniforms.customUniform += 0.04 * delta; 36 | }); 37 | 38 | -------------------------------------------------------------------------------- /examples/pixiBasicsMega.txt: -------------------------------------------------------------------------------- 1 | var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb}); 2 | document.body.appendChild(app.view); 3 | 4 | // create a new Sprite from an image path 5 | var bunny = PIXI.Sprite.fromImage('http://pixijs.io/examples/required/assets/basics/bunny.png') 6 | 7 | // center the sprite's anchor point 8 | bunny.anchor.set(0.5); 9 | 10 | // move the sprite to the center of the screen 11 | bunny.x = app.screen.width / 2; 12 | bunny.y = app.screen.height / 2; 13 | 14 | app.stage.addChild(bunny); 15 | 16 | var rotation = function(delta) { 17 | // just for fun, let's rotate mr rabbit a little 18 | // delta is 1 if running at 100% performance 19 | // creates frame-independent transformation 20 | bunny.rotation += 0.1 * delta; 21 | }; 22 | rotation(0.01); 23 | 24 | // Listen for animate update 25 | app.ticker.add(rotation); 26 | var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb}); 27 | document.body.appendChild(app.view); 28 | 29 | var container = new PIXI.Container(); 30 | 31 | app.stage.addChild(container); 32 | 33 | var texture = PIXI.Texture.fromImage('http://pixijs.io/examples/required/assets/basics/bunny.png'); 34 | 35 | // Create a 5x5 grid of bunnies 36 | for (var i = 0; i < 25; i++) { 37 | var bunny = new PIXI.Sprite(texture); 38 | bunny.anchor.set(0.5); 39 | bunny.x = (i % 5) * 40; 40 | bunny.y = Math.floor(i / 5) * 40; 41 | container.addChild(bunny); 42 | } 43 | 44 | // Center on the screen 45 | container.x = (app.screen.width - container.width) / 2; 46 | container.y = (app.screen.height - container.height) / 2; 47 | var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb}); 48 | document.body.appendChild(app.view); 49 | 50 | var container = new PIXI.Container(); 51 | 52 | app.stage.addChild(container); 53 | 54 | // Create a new texture 55 | var texture = PIXI.Texture.fromImage('http://pixijs.io/examples/required/assets/basics/bunny.png'); 56 | 57 | // Create a 5x5 grid of bunnies 58 | for (var i = 0; i < 25; i++) { 59 | var bunny = new PIXI.Sprite(texture); 60 | bunny.anchor.set(0.5); 61 | bunny.x = (i % 5) * 40; 62 | bunny.y = Math.floor(i / 5) * 40; 63 | container.addChild(bunny); 64 | } 65 | 66 | // Move container to the center 67 | container.x = app.screen.width / 2; 68 | container.y = app.screen.height / 2; 69 | 70 | // Center bunny sprite in local container coordinates 71 | container.pivot.x = container.width / 2; 72 | container.pivot.y = container.height / 2; 73 | 74 | // Listen for animate update 75 | app.ticker.add(function(delta) { 76 | // rotate the container! 77 | // use delta to create frame-independent transform 78 | container.rotation -= 0.01 * delta; 79 | }); 80 | var fighterApp = new PIXI.Application(); 81 | document.body.appendChild(fighterApp.view); 82 | 83 | function onAssetsLoaded(loader, res) 84 | { 85 | var app = fighterApp; 86 | 87 | // create an array of textures from an image path 88 | var frames = []; 89 | 90 | for (var i = 0; i < 30; i++) { 91 | var val = i < 10 ? '0' + i : '' + i; 92 | 93 | // magically works since the spritesheet was loaded with the pixi loader 94 | frames.push(PIXI.Texture.fromFrame('rollSequence00' + val + '.png')); 95 | } 96 | 97 | // create an AnimatedSprite (brings back memories from the days of Flash, right ?) 98 | var anim = new PIXI.extras.AnimatedSprite(frames); 99 | 100 | /* 101 | * An AnimatedSprite inherits all the properties of a PIXI sprite 102 | * so you can change its position, its anchor, mask it, etc 103 | */ 104 | anim.x = app.screen.width / 2; 105 | anim.y = app.screen.height / 2; 106 | anim.anchor.set(0.5); 107 | anim.animationSpeed = 0.5; 108 | anim.play(); 109 | 110 | app.stage.addChild(anim); 111 | 112 | // Animate the rotation 113 | app.ticker.add(function(delta) { 114 | anim.rotation += 0.01; 115 | }); 116 | } 117 | 118 | var fighterJson = 'http://pixijs.io/examples/required/assets/basics/fighter.json'; 119 | /* Done near end of script instead */ 120 | /* 121 | PIXI.loader 122 | .add('fighter', 'http://pixijs.io/examples/required/assets/basics/fighter.json') 123 | .load(onAssetsLoaded); 124 | */ 125 | var app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb }); 126 | /* 127 | console.log(app.constructor.name); 128 | */ 129 | document.body.appendChild(app.view); 130 | 131 | // Scale mode for all textures, will retain pixelation 132 | PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST; 133 | 134 | var sprite = PIXI.Sprite.fromImage('http://pixijs.io/examples/required/assets/basics/bunny.png'); 135 | 136 | // Set the initial position 137 | sprite.anchor.set(0.5); 138 | sprite.x = app.screen.width / 2 + 0.01; 139 | sprite.y = app.screen.height / 2 + 0.01; 140 | sprite.scale.x = 1.01; 141 | sprite.scale.y = 1.01; 142 | 143 | // Opt-in to interactivity 144 | sprite.interactive = true; 145 | 146 | // Shows hand cursor 147 | sprite.buttonMode = true; 148 | 149 | /* PS: Functions are not automatically lifted and must be in order for 150 | * generated script to use them correctly. */ 151 | function onClick(evt) { 152 | /* PS: Make sure your event handlers are called at least once by script */ 153 | console.log(evt); 154 | sprite.scale.x *= 1.25; 155 | sprite.scale.y *= 1.25; 156 | return 0; 157 | } 158 | 159 | // Pointers normalize touch and mouse 160 | sprite.on('pointerdown', onClick); 161 | 162 | /* PS: Make sure your event handlers are called at least once by script, and 163 | * done after function passed around, like in the following line: */ 164 | onClick(new Event('test')); 165 | 166 | // Alternatively, use the mouse & touch events: 167 | // sprite.on('click', onClick); // mouse-only 168 | // sprite.on('tap', onClick); // touch-only 169 | 170 | app.stage.addChild(sprite); 171 | 172 | 173 | var x = 3; 174 | 175 | x *= 2; 176 | var app = new PIXI.Application(); 177 | document.body.appendChild(app.view); 178 | 179 | // create a texture from an image path 180 | var texture = PIXI.Texture.fromImage('http://pixijs.io/examples/required/assets/p2.jpeg'); 181 | 182 | /* create a tiling sprite ... 183 | * requires a texture, a width and a height 184 | * in WebGL the image size should preferably be a power of two 185 | */ 186 | var tilingSprite = new PIXI.extras.TilingSprite( 187 | texture, 188 | app.screen.width, 189 | app.screen.height 190 | ); 191 | app.stage.addChild(tilingSprite); 192 | 193 | var count = 0.005; 194 | 195 | app.ticker.add(function() { 196 | 197 | count += 0.005; 198 | 199 | tilingSprite.tileScale.x = 2 + Math.sin(count); 200 | tilingSprite.tileScale.y = 2 + Math.cos(count); 201 | 202 | tilingSprite.tilePosition.x += 1; 203 | tilingSprite.tilePosition.y += 1; 204 | }); 205 | var app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb}); 206 | document.body.appendChild(app.view); 207 | 208 | var basicText = new PIXI.Text('Basic text in pixi'); 209 | basicText.x = 30; 210 | basicText.y = 90; 211 | 212 | app.stage.addChild(basicText); 213 | 214 | var style = new PIXI.TextStyle({ 215 | fontFamily: 'Arial', 216 | fontSize: 36, 217 | fontStyle: 'italic', 218 | fontWeight: 'bold', 219 | fill: ['#ffffff', '#00ff99'], // gradient 220 | stroke: '#4a1850', 221 | strokeThickness: 5, 222 | dropShadow: true, 223 | dropShadowColor: '#000000', 224 | dropShadowBlur: 4, 225 | dropShadowAngle: Math.PI / 6, 226 | dropShadowDistance: 6, 227 | wordWrap: true, 228 | wordWrapWidth: 440 229 | }); 230 | 231 | var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines', style); 232 | richText.x = 30; 233 | richText.y = 180; 234 | 235 | app.stage.addChild(richText); 236 | var app = new PIXI.Application(800, 600, { antialias: true }); 237 | document.body.appendChild(app.view); 238 | 239 | var graphics = new PIXI.Graphics(); 240 | 241 | // set a fill and line style 242 | graphics.beginFill(0xFF3300); 243 | graphics.lineStyle(4, 0xffd900, 1); 244 | 245 | // draw a shape 246 | graphics.moveTo(50,50); 247 | graphics.lineTo(250, 50); 248 | graphics.lineTo(100, 100); 249 | graphics.lineTo(50, 50); 250 | graphics.endFill(); 251 | 252 | // set a fill and a line style again and draw a rectangle 253 | graphics.lineStyle(2, 0x0000FF, 1); 254 | graphics.beginFill(0xFF700B, 1.01); 255 | graphics.drawRect(50, 250, 120, 120); 256 | 257 | // draw a rounded rectangle 258 | graphics.lineStyle(2, 0xFF00FF, 1); 259 | graphics.beginFill(0xFF00BB, 0.25); 260 | graphics.drawRoundedRect(150, 450, 300, 100, 15); 261 | graphics.endFill(); 262 | 263 | // draw a circle, set the lineStyle to zero so the circle doesn't have an outline 264 | graphics.lineStyle(0); 265 | graphics.beginFill(0xFFFF0B, 0.5); 266 | graphics.drawCircle(470, 90,60); 267 | graphics.endFill(); 268 | 269 | app.stage.addChild(graphics); 270 | var app = new PIXI.Application(800, 600, { transparent: true }); 271 | document.body.appendChild(app.view); 272 | 273 | // Create play button that can be used to trigger the video 274 | var button = new PIXI.Graphics() 275 | .beginFill(0x0, 0.5) 276 | .drawRoundedRect(0, 0, 100, 100, 10) 277 | .endFill() 278 | .beginFill(0xffffff) 279 | .moveTo(36, 30) 280 | .lineTo(36, 70) 281 | .lineTo(70, 50); 282 | 283 | // Position the button 284 | button.x = (app.screen.width - button.width) / 2; 285 | button.y = (app.screen.height - button.height) / 2; 286 | 287 | // Enable interactivity on the button 288 | button.interactive = true; 289 | button.buttonMode = true; 290 | 291 | // Add to the stage 292 | app.stage.addChild(button); 293 | 294 | function onPlayVideo() { 295 | 296 | // Don't need the button anymore 297 | button.destroy(); 298 | 299 | // create a video texture from a path 300 | var texture = PIXI.Texture.fromVideo('http://pixijs.io/examples/required/assets/testVideo.mp4'); 301 | 302 | // create a new Sprite using the video texture (yes it's that easy) 303 | var videoSprite = new PIXI.Sprite(texture); 304 | 305 | // Stetch the fullscreen 306 | videoSprite.width = app.screen.width; 307 | videoSprite.height = app.screen.height; 308 | 309 | app.stage.addChild(videoSprite); 310 | } 311 | 312 | // Listen for a click/tap event to start playing the video 313 | // this is useful for some mobile platforms. For example: 314 | // ios9 and under cannot render videos in PIXI without a 315 | // polyfill - https://github.com/bfred-it/iphone-inline-video 316 | // ios10 and above require a click/tap event to render videos 317 | // that contain audio in PIXI. Videos with no audio track do 318 | // not have this requirement 319 | button.on('pointertap', onPlayVideo); 320 | 321 | onPlayVideo(); 322 | var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb}); 323 | document.body.appendChild(app.view); 324 | 325 | var container = new PIXI.Container(); 326 | app.stage.addChild(container); 327 | 328 | var texture = PIXI.Texture.fromImage('http://pixijs.io/examples/required/assets/basics/bunny.png'); 329 | 330 | for (var i = 0; i < 25; i++) { 331 | var bunny = new PIXI.Sprite(texture); 332 | bunny.x = (i % 5) * 30; 333 | bunny.y = Math.floor(i / 5) * 30; 334 | bunny.rotation = Math.random() * (Math.PI * 2) 335 | container.addChild(bunny); 336 | } 337 | 338 | var brt = new PIXI.BaseRenderTexture(300, 300, PIXI.SCALE_MODES.LINEAR, 1); 339 | var rt = new PIXI.RenderTexture(brt); 340 | 341 | var sprite = new PIXI.Sprite(rt); 342 | 343 | sprite.x = 450; 344 | sprite.y = 60; 345 | app.stage.addChild(sprite); 346 | 347 | /* 348 | * All the bunnies are added to the container with the addChild method 349 | * when you do this, all the bunnies become children of the container, and when a container moves, 350 | * so do all its children. 351 | * This gives you a lot of flexibility and makes it easier to position elements on the screen 352 | */ 353 | container.x = 100; 354 | container.y = 60; 355 | 356 | app.ticker.add(function() { 357 | app.renderer.render(container, rt); 358 | }); 359 | var app = new PIXI.Application(); 360 | document.body.appendChild(app.view); 361 | 362 | var count = 0.1; 363 | 364 | // build a rope! 365 | var ropeLength = 45; 366 | 367 | var points = []; 368 | 369 | for (var i = 0; i < 25; i++) { 370 | points.push(new PIXI.Point(i * ropeLength, 0)); 371 | } 372 | 373 | var strip = new PIXI.mesh.Rope(PIXI.Texture.fromImage('http://pixijs.io/examples/required/assets/snake.png'), points); 374 | 375 | strip.x = -40; 376 | strip.y = 300; 377 | 378 | app.stage.addChild(strip); 379 | 380 | var g = new PIXI.Graphics(); 381 | g.x = strip.x; 382 | g.y = strip.y; 383 | app.stage.addChild(g); 384 | 385 | function renderPoints () { 386 | 387 | g.clear(); 388 | 389 | g.lineStyle(2,0xffc2c2); 390 | g.moveTo(points[0].x,points[0].y); 391 | 392 | for (var i = 1; i < points.length; i++) { 393 | g.lineTo(points[i].x,points[i].y); 394 | } 395 | 396 | for (var i = 1; i < points.length; i++) { 397 | g.beginFill(0xff0022); 398 | g.drawCircle(points[i].x,points[i].y,10); 399 | g.endFill(); 400 | } 401 | } 402 | 403 | // start animating 404 | app.ticker.add(function() { 405 | 406 | count += 0.1; 407 | 408 | // make the snake 409 | for (var i = 0; i < points.length; i++) { 410 | points[i].y = Math.sin((i * 0.6) + count) * 30; 411 | points[i].x = i * ropeLength + Math.cos((i * 0.3) + count) * 20; 412 | } 413 | renderPoints(); 414 | }); 415 | 416 | setTimeout(function() { 417 | var app = new PIXI.Application(); 418 | document.body.appendChild(app.view); 419 | 420 | // Create background image 421 | var background = PIXI.Sprite.fromImage("http://pixijs.io/examples/required/assets/bkg-grass.jpg"); 422 | background.width = app.screen.width; 423 | background.height = app.screen.height; 424 | app.stage.addChild(background); 425 | 426 | // Stop application wait for load to finish 427 | app.stop(); 428 | 429 | var filter = new PIXI.Filter(null, null); 430 | 431 | // Handle the load completed 432 | function onLoaded(loader, res) { 433 | // Create the new filter, arguments: (vertexShader, framentSource) 434 | filter = new PIXI.Filter(null, res.shader.data); 435 | 436 | // Add the filter 437 | /* Workaround for refmt bug https://github.com/facebook/reason/issues/1895 */ 438 | var filter2 = filter; 439 | background.filters = [filter2]; 440 | 441 | // Resume application update 442 | app.start(); 443 | } 444 | 445 | PIXI.loader 446 | .add('fighter', fighterJson) 447 | .add('shader', 'http://pixijs.io/examples/required/assets/basics/shader.frag') 448 | .load(function(loader, res) { 449 | onAssetsLoaded(loader, res); 450 | onLoaded(loader, res); 451 | }); 452 | 453 | // Animate the filter 454 | app.ticker.add(function(delta) { 455 | filter.uniforms.customUniform += 0.04 * delta; 456 | }); 457 | }, 0); 458 | -------------------------------------------------------------------------------- /experiments/flowtest.js: -------------------------------------------------------------------------------- 1 | var app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb }); 2 | /* 3 | console.log(app.constructor.name); 4 | */ 5 | document.body.appendChild(app.view); 6 | 7 | // Scale mode for all textures, will retain pixelation 8 | PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST; 9 | 10 | var sprite = PIXI.Sprite.fromImage('http://pixijs.io/examples/required/assets/basics/bunny.png'); 11 | 12 | // Set the initial position 13 | sprite.anchor.set(0.5); 14 | sprite.x = app.screen.width / 2; 15 | sprite.y = app.screen.height / 2; 16 | 17 | // Opt-in to interactivity 18 | sprite.interactive = true; 19 | 20 | // Shows hand cursor 21 | sprite.buttonMode = true; 22 | 23 | /* PS: Functions are not automatically lifted and must be in order for 24 | * generated script to use them correctly. */ 25 | function onClick(evt) { 26 | /* PS: Make sure your event handlers are called at least once by script */ 27 | console.log(evt); 28 | sprite.scale.x *= 1.25; 29 | sprite.scale.y *= 1.25; 30 | return 0; 31 | } 32 | 33 | // Pointers normalize touch and mouse 34 | sprite.on('pointerdown', onClick); 35 | 36 | /* PS: Make sure your event handlers are called at least once by script, and 37 | * done after function passed around, like in the following line: */ 38 | onClick(new Event('test')); 39 | 40 | // Alternatively, use the mouse & touch events: 41 | // sprite.on('click', onClick); // mouse-only 42 | // sprite.on('tap', onClick); // touch-only 43 | 44 | app.stage.addChild(sprite); 45 | 46 | if (true) { 47 | console.log("hello"); 48 | } else { 49 | console.log("blah"); 50 | } 51 | 52 | var x = 3; 53 | 54 | x *= 2; 55 | -------------------------------------------------------------------------------- /experiments/types.sh: -------------------------------------------------------------------------------- 1 | file=flowtest.js 2 | lib=node_modules/pixi.js/dist/pixi.js 3 | cat $lib $file > flowtest-pixi.js 4 | baseline=$(wc -l $lib | cut -f1 -d" ") 5 | line=$baseline 6 | cat $file | while read lineContents; do 7 | line=$(($line + 1)) 8 | char=0 9 | for char in `seq 0 $(echo $lineContents | wc -L)`; do 10 | echo node node_modules/.bin/flow type-at-pos $file $line $char 11 | # see https://github.com/facebook/flow/issues/248 12 | node node_modules/.bin/flow type-at-pos flowtest-pixi.js $line $char 13 | done 14 | done 15 | -------------------------------------------------------------------------------- /index-dev.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /index-dist.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | hello 6 | 7 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | hello 6 | 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "js-to-reasonml-transpiler", 3 | "version": "0.1.0", 4 | "scripts": { 5 | "build": "bsb -make-world", 6 | "bsbwatch": "bsb -make-world -w", 7 | "clean": "bsb -clean-world", 8 | "webpack": "webpack -w", 9 | "dev": "webpack-dev-server --hot", 10 | "start": "concurrently --raw 'npm run bsbwatch' 'npm run dev'", 11 | "test": "nyc node src/runtests.js", 12 | "coverage_report": "nyc report --reporter=html" 13 | }, 14 | "keywords": [ 15 | "BuckleScript" 16 | ], 17 | "author": "Eivind Magnus Hvidevold", 18 | "license": "MIT", 19 | "devDependencies": { 20 | "nyc": "^11.9.0", 21 | "webpack": "^3.12.0", 22 | "webpack-bundle-analyzer": "^2.13.1", 23 | "webpack-dev-server": "^2.11.3" 24 | }, 25 | "dependencies": { 26 | "bs-platform": "^2.2.3", 27 | "codemirror": "^5.40.0", 28 | "css-loader": "^0.28.11", 29 | "escodegen": "^1.11.0", 30 | "esprima": "^4.0.1", 31 | "jquery": "^3.3.1", 32 | "pixi.js": "^4.8.1", 33 | "puppeteer": "^1.7.0", 34 | "raw-loader": "^0.5.1", 35 | "style-loader": "^0.20.3", 36 | "window-or-global": "^1.0.1" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/Test.re: -------------------------------------------------------------------------------- 1 | type appApplicationT; 2 | 3 | type appHTMLDocumentT; 4 | 5 | type appHTMLBodyElementT; 6 | 7 | type appHTMLCanvasElementT; 8 | 9 | type usageFunSpriteT; 10 | 11 | type appSpriteT; 12 | 13 | type appObservablePointT; 14 | 15 | type appRectangleT; 16 | 17 | type appEventT; 18 | 19 | type appMemoryInfoT; 20 | 21 | type appContainerT; 22 | 23 | type smallObject0T = {. "backgroundColor": int}; 24 | 25 | type smallObject21T = {. "RESOLUTION": int}; 26 | 27 | type smallObject42T = { 28 | . 29 | "LINEAR": int, 30 | "NEAREST": int 31 | }; 32 | 33 | type smallObject65T = {. "memory": appMemoryInfoT}; 34 | 35 | type usageFunOnClickT = appEventT => int; 36 | 37 | [@bs.new] [@bs.module "pixi.js"] 38 | external newApplication3 : (int, int, smallObject0T) => appApplicationT = 39 | "Application"; 40 | 41 | [@bs.val] external document : appHTMLDocumentT = "document"; 42 | 43 | [@bs.get] external getBody : appHTMLDocumentT => appHTMLBodyElementT = "body"; 44 | 45 | [@bs.get] external getView : appApplicationT => appHTMLCanvasElementT = "view"; 46 | 47 | [@bs.send] 48 | external appendChild1 : 49 | (appHTMLBodyElementT, appHTMLCanvasElementT) => appHTMLCanvasElementT = 50 | "appendChild"; 51 | 52 | [@bs.val] [@bs.module "pixi.js"] 53 | external getSettings : smallObject21T = "settings"; 54 | 55 | [@bs.set] 56 | external setSCALE_MODE : (smallObject21T, int) => unit = "SCALE_MODE"; 57 | 58 | [@bs.val] [@bs.module "pixi.js"] [@bs.scope "settings"] 59 | external getSCALE_MODE : int = "SCALE_MODE"; 60 | 61 | [@bs.val] [@bs.module "pixi.js"] 62 | external getSCALE_MODES : smallObject42T = "SCALE_MODES"; 63 | 64 | [@bs.val] [@bs.module "pixi.js"] [@bs.scope "SCALE_MODES"] 65 | external getNEAREST : int = "NEAREST"; 66 | 67 | [@bs.val] [@bs.module "pixi.js"] 68 | external getSprite : usageFunSpriteT = "Sprite"; 69 | 70 | [@bs.val] [@bs.module "pixi.js"] [@bs.scope "Sprite"] 71 | external fromImage1 : string => appSpriteT = "fromImage"; 72 | 73 | [@bs.get] external getAnchor : appSpriteT => appObservablePointT = "anchor"; 74 | 75 | [@bs.send] external set1 : (appObservablePointT, float) => unit = "set"; 76 | 77 | [@bs.set] external setX : (appSpriteT, int) => unit = "x"; 78 | 79 | [@bs.get] external getX : appSpriteT => int = "x"; 80 | 81 | [@bs.get] external getScreen : appApplicationT => appRectangleT = "screen"; 82 | 83 | [@bs.get] external getWidth : appRectangleT => int = "width"; 84 | 85 | [@bs.set] external setY : (appSpriteT, int) => unit = "y"; 86 | 87 | [@bs.get] external getY : appSpriteT => int = "y"; 88 | 89 | [@bs.get] external getHeight : appRectangleT => int = "height"; 90 | 91 | [@bs.set] 92 | external setInteractive : (appSpriteT, Js.boolean) => unit = "interactive"; 93 | 94 | [@bs.get] external getInteractive : appSpriteT => Js.boolean = "interactive"; 95 | 96 | [@bs.set] 97 | external setButtonMode : (appSpriteT, Js.boolean) => unit = "buttonMode"; 98 | 99 | [@bs.get] external getButtonMode : appSpriteT => Js.boolean = "buttonMode"; 100 | 101 | [@bs.val] external console : smallObject65T = "console"; 102 | 103 | [@bs.get] external getScale : appSpriteT => appObservablePointT = "scale"; 104 | 105 | [@bs.set] 106 | external setXappObservablePointTfloat : (appObservablePointT, float) => unit = 107 | "x"; 108 | 109 | [@bs.get] 110 | external getXappObservablePointT : appObservablePointT => float = "x"; 111 | 112 | [@bs.set] 113 | external setYappObservablePointTfloat : (appObservablePointT, float) => unit = 114 | "y"; 115 | 116 | [@bs.get] 117 | external getYappObservablePointT : appObservablePointT => float = "y"; 118 | 119 | [@bs.send] 120 | external on2 : (appSpriteT, string, usageFunOnClickT) => appSpriteT = "on"; 121 | 122 | [@bs.new] external newEvent1 : string => appEventT = "Event"; 123 | 124 | [@bs.get] external getStage : appApplicationT => appContainerT = "stage"; 125 | 126 | [@bs.send] 127 | external addChild1 : (appContainerT, appSpriteT) => appSpriteT = "addChild"; 128 | 129 | let app = newApplication3(800, 600, {"backgroundColor": 0x1099bb}); 130 | 131 | /* 132 | console.log(app.constructor.name); 133 | */ 134 | document |. getBody |. appendChild1(app |. getView); 135 | 136 | /* Scale mode for all textures, will retain pixelation */ 137 | setSCALE_MODE(getSettings, getNEAREST); 138 | 139 | let sprite = 140 | fromImage1("http://pixijs.io/examples/required/assets/basics/bunny.png"); 141 | 142 | /* Set the initial position */ 143 | sprite |. getAnchor |. set1(0.5); 144 | 145 | setX(sprite, (app |. getScreen |. getWidth) / 2); 146 | 147 | setY(sprite, (app |. getScreen |. getHeight) / 2); 148 | 149 | /* Opt-in to interactivity */ 150 | setInteractive(sprite, Js.true_); 151 | 152 | /* Shows hand cursor */ 153 | setButtonMode(sprite, Js.true_); 154 | 155 | /* PS: Functions are not automatically lifted and must be in order for 156 | * generated script to use them correctly. */ 157 | let onClick = evt => { 158 | /* PS: Make sure your event handlers are called at least once by script */ 159 | Js.log(evt); 160 | setXappObservablePointTfloat( 161 | sprite |. getScale, 162 | (sprite |. getScale |. getXappObservablePointT) *. 1.25 163 | ); 164 | setYappObservablePointTfloat( 165 | sprite |. getScale, 166 | (sprite |. getScale |. getYappObservablePointT) *. 1.25 167 | ); 168 | 0; 169 | }; 170 | 171 | /* Pointers normalize touch and mouse */ 172 | sprite |. on2("pointerdown", onClick); 173 | 174 | /* PS: Make sure your event handlers are called at least once by script, and 175 | * done after function passed around, like in the following line: */ 176 | onClick(newEvent1("test")); 177 | 178 | /* Alternatively, use the mouse & touch events: 179 | sprite.on('click', onClick); // mouse-only 180 | sprite.on('tap', onClick); // touch-only */ 181 | app |. getStage |. addChild1(sprite); 182 | 183 | if (Js.to_bool(Js.true_)) { 184 | Js.log("hello"); 185 | } else { 186 | Js.log("blah"); 187 | }; 188 | 189 | let xRef = ref(3); 190 | 191 | xRef := xRef^ * 2; 192 | -------------------------------------------------------------------------------- /src/TestNode.re: -------------------------------------------------------------------------------- 1 | type usageRequireT; 2 | 3 | type appConsoleT; 4 | 5 | type smallObject0T = {. "constants": usageRequireT}; 6 | 7 | [@bs.send] external require : string => smallObject0T = "require"; 8 | 9 | [@bs.val] [@bs.module "fs"] 10 | external readFileSync2 : (string, string) => string = "readFileSync"; 11 | 12 | [@bs.val] external console : appConsoleT = "console"; 13 | 14 | let example = readFileSync2("src/example-node.txt", "utf-8"); 15 | 16 | let iRef = ref(0); 17 | 18 | while (iRef^ < 10) { 19 | Js.log(iRef^); 20 | iRef := iRef^ + 1; 21 | }; 22 | -------------------------------------------------------------------------------- /src/example-node.txt: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | 3 | var example = fs.readFileSync('src/example-node.txt', 'utf-8'); 4 | 5 | for (var i = 0; i < 10; i++) { 6 | console.log(i); 7 | } 8 | -------------------------------------------------------------------------------- /src/example.ast: -------------------------------------------------------------------------------- 1 | { 2 | "type": "Program", 3 | "body": [ 4 | { 5 | "type": "VariableDeclaration", 6 | "declarations": [ 7 | { 8 | "type": "VariableDeclarator", 9 | "id": { 10 | "type": "Identifier", 11 | "name": "app", 12 | "range": [ 13 | 4, 14 | 7 15 | ] 16 | }, 17 | "init": { 18 | "type": "NewExpression", 19 | "callee": { 20 | "type": "MemberExpression", 21 | "computed": false, 22 | "object": { 23 | "type": "Identifier", 24 | "name": "PIXI", 25 | "range": [ 26 | 14, 27 | 18 28 | ] 29 | }, 30 | "property": { 31 | "type": "Identifier", 32 | "name": "Application", 33 | "range": [ 34 | 19, 35 | 30 36 | ] 37 | }, 38 | "range": [ 39 | 14, 40 | 30 41 | ] 42 | }, 43 | "arguments": [ 44 | { 45 | "type": "Literal", 46 | "value": 800, 47 | "raw": "800", 48 | "range": [ 49 | 31, 50 | 34 51 | ] 52 | }, 53 | { 54 | "type": "Literal", 55 | "value": 600, 56 | "raw": "600", 57 | "range": [ 58 | 36, 59 | 39 60 | ] 61 | }, 62 | { 63 | "type": "ObjectExpression", 64 | "properties": [ 65 | { 66 | "type": "Property", 67 | "key": { 68 | "type": "Identifier", 69 | "name": "backgroundColor", 70 | "range": [ 71 | 43, 72 | 58 73 | ] 74 | }, 75 | "computed": false, 76 | "value": { 77 | "type": "Literal", 78 | "value": 1087931, 79 | "raw": "0x1099bb", 80 | "range": [ 81 | 60, 82 | 68 83 | ] 84 | }, 85 | "kind": "init", 86 | "method": false, 87 | "shorthand": false, 88 | "range": [ 89 | 43, 90 | 68 91 | ] 92 | } 93 | ], 94 | "range": [ 95 | 41, 96 | 70 97 | ] 98 | } 99 | ], 100 | "range": [ 101 | 10, 102 | 71 103 | ] 104 | }, 105 | "range": [ 106 | 4, 107 | 71 108 | ] 109 | } 110 | ], 111 | "kind": "var", 112 | "range": [ 113 | 0, 114 | 72 115 | ] 116 | }, 117 | { 118 | "type": "ExpressionStatement", 119 | "expression": { 120 | "type": "CallExpression", 121 | "callee": { 122 | "type": "MemberExpression", 123 | "computed": false, 124 | "object": { 125 | "type": "MemberExpression", 126 | "computed": false, 127 | "object": { 128 | "type": "Identifier", 129 | "name": "document", 130 | "range": [ 131 | 114, 132 | 122 133 | ] 134 | }, 135 | "property": { 136 | "type": "Identifier", 137 | "name": "body", 138 | "range": [ 139 | 123, 140 | 127 141 | ] 142 | }, 143 | "range": [ 144 | 114, 145 | 127 146 | ] 147 | }, 148 | "property": { 149 | "type": "Identifier", 150 | "name": "appendChild", 151 | "range": [ 152 | 128, 153 | 139 154 | ] 155 | }, 156 | "range": [ 157 | 114, 158 | 139 159 | ] 160 | }, 161 | "arguments": [ 162 | { 163 | "type": "MemberExpression", 164 | "computed": false, 165 | "object": { 166 | "type": "Identifier", 167 | "name": "app", 168 | "range": [ 169 | 140, 170 | 143 171 | ] 172 | }, 173 | "property": { 174 | "type": "Identifier", 175 | "name": "view", 176 | "range": [ 177 | 144, 178 | 148 179 | ] 180 | }, 181 | "range": [ 182 | 140, 183 | 148 184 | ] 185 | } 186 | ], 187 | "range": [ 188 | 114, 189 | 149 190 | ] 191 | }, 192 | "range": [ 193 | 114, 194 | 150 195 | ], 196 | "leadingComments": [ 197 | { 198 | "type": "Block", 199 | "value": "\nconsole.log(app.constructor.name);\n", 200 | "range": { 201 | "0": 73, 202 | "1": 113 203 | }, 204 | "extendedRange": [ 205 | 72, 206 | 114 207 | ] 208 | } 209 | ] 210 | }, 211 | { 212 | "type": "ExpressionStatement", 213 | "expression": { 214 | "type": "AssignmentExpression", 215 | "operator": "=", 216 | "left": { 217 | "type": "MemberExpression", 218 | "computed": false, 219 | "object": { 220 | "type": "MemberExpression", 221 | "computed": false, 222 | "object": { 223 | "type": "Identifier", 224 | "name": "PIXI", 225 | "range": [ 226 | 207, 227 | 211 228 | ] 229 | }, 230 | "property": { 231 | "type": "Identifier", 232 | "name": "settings", 233 | "range": [ 234 | 212, 235 | 220 236 | ] 237 | }, 238 | "range": [ 239 | 207, 240 | 220 241 | ] 242 | }, 243 | "property": { 244 | "type": "Identifier", 245 | "name": "SCALE_MODE", 246 | "range": [ 247 | 221, 248 | 231 249 | ] 250 | }, 251 | "range": [ 252 | 207, 253 | 231 254 | ] 255 | }, 256 | "right": { 257 | "type": "MemberExpression", 258 | "computed": false, 259 | "object": { 260 | "type": "MemberExpression", 261 | "computed": false, 262 | "object": { 263 | "type": "Identifier", 264 | "name": "PIXI", 265 | "range": [ 266 | 234, 267 | 238 268 | ] 269 | }, 270 | "property": { 271 | "type": "Identifier", 272 | "name": "SCALE_MODES", 273 | "range": [ 274 | 239, 275 | 250 276 | ] 277 | }, 278 | "range": [ 279 | 234, 280 | 250 281 | ] 282 | }, 283 | "property": { 284 | "type": "Identifier", 285 | "name": "NEAREST", 286 | "range": [ 287 | 251, 288 | 258 289 | ] 290 | }, 291 | "range": [ 292 | 234, 293 | 258 294 | ] 295 | }, 296 | "range": [ 297 | 207, 298 | 258 299 | ] 300 | }, 301 | "range": [ 302 | 207, 303 | 259 304 | ], 305 | "leadingComments": [ 306 | { 307 | "type": "Line", 308 | "value": " Scale mode for all textures, will retain pixelation", 309 | "range": { 310 | "0": 152, 311 | "1": 206 312 | }, 313 | "extendedRange": [ 314 | 150, 315 | 207 316 | ] 317 | } 318 | ] 319 | }, 320 | { 321 | "type": "VariableDeclaration", 322 | "declarations": [ 323 | { 324 | "type": "VariableDeclarator", 325 | "id": { 326 | "type": "Identifier", 327 | "name": "sprite", 328 | "range": [ 329 | 265, 330 | 271 331 | ] 332 | }, 333 | "init": { 334 | "type": "CallExpression", 335 | "callee": { 336 | "type": "MemberExpression", 337 | "computed": false, 338 | "object": { 339 | "type": "MemberExpression", 340 | "computed": false, 341 | "object": { 342 | "type": "Identifier", 343 | "name": "PIXI", 344 | "range": [ 345 | 274, 346 | 278 347 | ] 348 | }, 349 | "property": { 350 | "type": "Identifier", 351 | "name": "Sprite", 352 | "range": [ 353 | 279, 354 | 285 355 | ] 356 | }, 357 | "range": [ 358 | 274, 359 | 285 360 | ] 361 | }, 362 | "property": { 363 | "type": "Identifier", 364 | "name": "fromImage", 365 | "range": [ 366 | 286, 367 | 295 368 | ] 369 | }, 370 | "range": [ 371 | 274, 372 | 295 373 | ] 374 | }, 375 | "arguments": [ 376 | { 377 | "type": "Literal", 378 | "value": "http://pixijs.io/examples/required/assets/basics/bunny.png", 379 | "raw": "'http://pixijs.io/examples/required/assets/basics/bunny.png'", 380 | "range": [ 381 | 296, 382 | 356 383 | ] 384 | } 385 | ], 386 | "range": [ 387 | 274, 388 | 357 389 | ] 390 | }, 391 | "range": [ 392 | 265, 393 | 357 394 | ] 395 | } 396 | ], 397 | "kind": "var", 398 | "range": [ 399 | 261, 400 | 358 401 | ] 402 | }, 403 | { 404 | "type": "ExpressionStatement", 405 | "expression": { 406 | "type": "CallExpression", 407 | "callee": { 408 | "type": "MemberExpression", 409 | "computed": false, 410 | "object": { 411 | "type": "MemberExpression", 412 | "computed": false, 413 | "object": { 414 | "type": "Identifier", 415 | "name": "sprite", 416 | "range": [ 417 | 388, 418 | 394 419 | ] 420 | }, 421 | "property": { 422 | "type": "Identifier", 423 | "name": "anchor", 424 | "range": [ 425 | 395, 426 | 401 427 | ] 428 | }, 429 | "range": [ 430 | 388, 431 | 401 432 | ] 433 | }, 434 | "property": { 435 | "type": "Identifier", 436 | "name": "set", 437 | "range": [ 438 | 402, 439 | 405 440 | ] 441 | }, 442 | "range": [ 443 | 388, 444 | 405 445 | ] 446 | }, 447 | "arguments": [ 448 | { 449 | "type": "Literal", 450 | "value": 0.5, 451 | "raw": "0.5", 452 | "range": [ 453 | 406, 454 | 409 455 | ] 456 | } 457 | ], 458 | "range": [ 459 | 388, 460 | 410 461 | ] 462 | }, 463 | "range": [ 464 | 388, 465 | 411 466 | ], 467 | "leadingComments": [ 468 | { 469 | "type": "Line", 470 | "value": " Set the initial position", 471 | "range": { 472 | "0": 360, 473 | "1": 387 474 | }, 475 | "extendedRange": [ 476 | 358, 477 | 388 478 | ] 479 | } 480 | ] 481 | }, 482 | { 483 | "type": "ExpressionStatement", 484 | "expression": { 485 | "type": "AssignmentExpression", 486 | "operator": "=", 487 | "left": { 488 | "type": "MemberExpression", 489 | "computed": false, 490 | "object": { 491 | "type": "Identifier", 492 | "name": "sprite", 493 | "range": [ 494 | 412, 495 | 418 496 | ] 497 | }, 498 | "property": { 499 | "type": "Identifier", 500 | "name": "x", 501 | "range": [ 502 | 419, 503 | 420 504 | ] 505 | }, 506 | "range": [ 507 | 412, 508 | 420 509 | ] 510 | }, 511 | "right": { 512 | "type": "BinaryExpression", 513 | "operator": "/", 514 | "left": { 515 | "type": "MemberExpression", 516 | "computed": false, 517 | "object": { 518 | "type": "MemberExpression", 519 | "computed": false, 520 | "object": { 521 | "type": "Identifier", 522 | "name": "app", 523 | "range": [ 524 | 423, 525 | 426 526 | ] 527 | }, 528 | "property": { 529 | "type": "Identifier", 530 | "name": "screen", 531 | "range": [ 532 | 427, 533 | 433 534 | ] 535 | }, 536 | "range": [ 537 | 423, 538 | 433 539 | ] 540 | }, 541 | "property": { 542 | "type": "Identifier", 543 | "name": "width", 544 | "range": [ 545 | 434, 546 | 439 547 | ] 548 | }, 549 | "range": [ 550 | 423, 551 | 439 552 | ] 553 | }, 554 | "right": { 555 | "type": "Literal", 556 | "value": 2, 557 | "raw": "2", 558 | "range": [ 559 | 442, 560 | 443 561 | ] 562 | }, 563 | "range": [ 564 | 423, 565 | 443 566 | ] 567 | }, 568 | "range": [ 569 | 412, 570 | 443 571 | ] 572 | }, 573 | "range": [ 574 | 412, 575 | 444 576 | ] 577 | }, 578 | { 579 | "type": "ExpressionStatement", 580 | "expression": { 581 | "type": "AssignmentExpression", 582 | "operator": "=", 583 | "left": { 584 | "type": "MemberExpression", 585 | "computed": false, 586 | "object": { 587 | "type": "Identifier", 588 | "name": "sprite", 589 | "range": [ 590 | 445, 591 | 451 592 | ] 593 | }, 594 | "property": { 595 | "type": "Identifier", 596 | "name": "y", 597 | "range": [ 598 | 452, 599 | 453 600 | ] 601 | }, 602 | "range": [ 603 | 445, 604 | 453 605 | ] 606 | }, 607 | "right": { 608 | "type": "BinaryExpression", 609 | "operator": "/", 610 | "left": { 611 | "type": "MemberExpression", 612 | "computed": false, 613 | "object": { 614 | "type": "MemberExpression", 615 | "computed": false, 616 | "object": { 617 | "type": "Identifier", 618 | "name": "app", 619 | "range": [ 620 | 456, 621 | 459 622 | ] 623 | }, 624 | "property": { 625 | "type": "Identifier", 626 | "name": "screen", 627 | "range": [ 628 | 460, 629 | 466 630 | ] 631 | }, 632 | "range": [ 633 | 456, 634 | 466 635 | ] 636 | }, 637 | "property": { 638 | "type": "Identifier", 639 | "name": "height", 640 | "range": [ 641 | 467, 642 | 473 643 | ] 644 | }, 645 | "range": [ 646 | 456, 647 | 473 648 | ] 649 | }, 650 | "right": { 651 | "type": "Literal", 652 | "value": 2, 653 | "raw": "2", 654 | "range": [ 655 | 476, 656 | 477 657 | ] 658 | }, 659 | "range": [ 660 | 456, 661 | 477 662 | ] 663 | }, 664 | "range": [ 665 | 445, 666 | 477 667 | ] 668 | }, 669 | "range": [ 670 | 445, 671 | 478 672 | ] 673 | }, 674 | { 675 | "type": "ExpressionStatement", 676 | "expression": { 677 | "type": "AssignmentExpression", 678 | "operator": "=", 679 | "left": { 680 | "type": "MemberExpression", 681 | "computed": false, 682 | "object": { 683 | "type": "Identifier", 684 | "name": "sprite", 685 | "range": [ 686 | 507, 687 | 513 688 | ] 689 | }, 690 | "property": { 691 | "type": "Identifier", 692 | "name": "interactive", 693 | "range": [ 694 | 514, 695 | 525 696 | ] 697 | }, 698 | "range": [ 699 | 507, 700 | 525 701 | ] 702 | }, 703 | "right": { 704 | "type": "Literal", 705 | "value": true, 706 | "raw": "true", 707 | "range": [ 708 | 528, 709 | 532 710 | ] 711 | }, 712 | "range": [ 713 | 507, 714 | 532 715 | ] 716 | }, 717 | "range": [ 718 | 507, 719 | 533 720 | ], 721 | "leadingComments": [ 722 | { 723 | "type": "Line", 724 | "value": " Opt-in to interactivity", 725 | "range": { 726 | "0": 480, 727 | "1": 506 728 | }, 729 | "extendedRange": [ 730 | 478, 731 | 507 732 | ] 733 | } 734 | ] 735 | }, 736 | { 737 | "type": "ExpressionStatement", 738 | "expression": { 739 | "type": "AssignmentExpression", 740 | "operator": "=", 741 | "left": { 742 | "type": "MemberExpression", 743 | "computed": false, 744 | "object": { 745 | "type": "Identifier", 746 | "name": "sprite", 747 | "range": [ 748 | 556, 749 | 562 750 | ] 751 | }, 752 | "property": { 753 | "type": "Identifier", 754 | "name": "buttonMode", 755 | "range": [ 756 | 563, 757 | 573 758 | ] 759 | }, 760 | "range": [ 761 | 556, 762 | 573 763 | ] 764 | }, 765 | "right": { 766 | "type": "Literal", 767 | "value": true, 768 | "raw": "true", 769 | "range": [ 770 | 576, 771 | 580 772 | ] 773 | }, 774 | "range": [ 775 | 556, 776 | 580 777 | ] 778 | }, 779 | "range": [ 780 | 556, 781 | 581 782 | ], 783 | "leadingComments": [ 784 | { 785 | "type": "Line", 786 | "value": " Shows hand cursor", 787 | "range": { 788 | "0": 535, 789 | "1": 555 790 | }, 791 | "extendedRange": [ 792 | 533, 793 | 556 794 | ] 795 | } 796 | ] 797 | }, 798 | { 799 | "type": "FunctionDeclaration", 800 | "id": { 801 | "type": "Identifier", 802 | "name": "onClick", 803 | "range": [ 804 | 709, 805 | 716 806 | ] 807 | }, 808 | "params": [ 809 | { 810 | "type": "Identifier", 811 | "name": "evt", 812 | "range": [ 813 | 717, 814 | 720 815 | ] 816 | } 817 | ], 818 | "body": { 819 | "type": "BlockStatement", 820 | "body": [ 821 | { 822 | "type": "ExpressionStatement", 823 | "expression": { 824 | "type": "AssignmentExpression", 825 | "operator": "*=", 826 | "left": { 827 | "type": "MemberExpression", 828 | "computed": false, 829 | "object": { 830 | "type": "MemberExpression", 831 | "computed": false, 832 | "object": { 833 | "type": "Identifier", 834 | "name": "sprite", 835 | "range": [ 836 | 803, 837 | 809 838 | ] 839 | }, 840 | "property": { 841 | "type": "Identifier", 842 | "name": "scale", 843 | "range": [ 844 | 810, 845 | 815 846 | ] 847 | }, 848 | "range": [ 849 | 803, 850 | 815 851 | ] 852 | }, 853 | "property": { 854 | "type": "Identifier", 855 | "name": "x", 856 | "range": [ 857 | 816, 858 | 817 859 | ] 860 | }, 861 | "range": [ 862 | 803, 863 | 817 864 | ] 865 | }, 866 | "right": { 867 | "type": "Literal", 868 | "value": 1.25, 869 | "raw": "1.25", 870 | "range": [ 871 | 821, 872 | 825 873 | ] 874 | }, 875 | "range": [ 876 | 803, 877 | 825 878 | ] 879 | }, 880 | "range": [ 881 | 803, 882 | 826 883 | ], 884 | "leadingComments": [ 885 | { 886 | "type": "Block", 887 | "value": " PS: Make sure your event handlers are called at least once by script ", 888 | "range": { 889 | "0": 726, 890 | "1": 800 891 | }, 892 | "extendedRange": [ 893 | 723, 894 | 803 895 | ] 896 | } 897 | ] 898 | }, 899 | { 900 | "type": "ExpressionStatement", 901 | "expression": { 902 | "type": "AssignmentExpression", 903 | "operator": "*=", 904 | "left": { 905 | "type": "MemberExpression", 906 | "computed": false, 907 | "object": { 908 | "type": "MemberExpression", 909 | "computed": false, 910 | "object": { 911 | "type": "Identifier", 912 | "name": "sprite", 913 | "range": [ 914 | 829, 915 | 835 916 | ] 917 | }, 918 | "property": { 919 | "type": "Identifier", 920 | "name": "scale", 921 | "range": [ 922 | 836, 923 | 841 924 | ] 925 | }, 926 | "range": [ 927 | 829, 928 | 841 929 | ] 930 | }, 931 | "property": { 932 | "type": "Identifier", 933 | "name": "y", 934 | "range": [ 935 | 842, 936 | 843 937 | ] 938 | }, 939 | "range": [ 940 | 829, 941 | 843 942 | ] 943 | }, 944 | "right": { 945 | "type": "Literal", 946 | "value": 1.25, 947 | "raw": "1.25", 948 | "range": [ 949 | 847, 950 | 851 951 | ] 952 | }, 953 | "range": [ 954 | 829, 955 | 851 956 | ] 957 | }, 958 | "range": [ 959 | 829, 960 | 852 961 | ] 962 | } 963 | ], 964 | "range": [ 965 | 722, 966 | 854 967 | ] 968 | }, 969 | "generator": false, 970 | "expression": false, 971 | "async": false, 972 | "range": [ 973 | 700, 974 | 854 975 | ], 976 | "leadingComments": [ 977 | { 978 | "type": "Block", 979 | "value": " PS: Functions are not automatically lifted and must be in order for\n * generated script to use them correctly. ", 980 | "range": { 981 | "0": 583, 982 | "1": 699 983 | }, 984 | "extendedRange": [ 985 | 581, 986 | 700 987 | ] 988 | } 989 | ] 990 | }, 991 | { 992 | "type": "ExpressionStatement", 993 | "expression": { 994 | "type": "CallExpression", 995 | "callee": { 996 | "type": "Identifier", 997 | "name": "onClick", 998 | "range": [ 999 | 963, 1000 | 970 1001 | ] 1002 | }, 1003 | "arguments": [], 1004 | "range": [ 1005 | 963, 1006 | 972 1007 | ] 1008 | }, 1009 | "range": [ 1010 | 963, 1011 | 973 1012 | ], 1013 | "leadingComments": [ 1014 | { 1015 | "type": "Block", 1016 | "value": " PS: Make sure your event handlers are called at least once by script, like\n * in the following line: ", 1017 | "range": { 1018 | "0": 856, 1019 | "1": 962 1020 | }, 1021 | "extendedRange": [ 1022 | 854, 1023 | 963 1024 | ] 1025 | } 1026 | ] 1027 | }, 1028 | { 1029 | "type": "ExpressionStatement", 1030 | "expression": { 1031 | "type": "CallExpression", 1032 | "callee": { 1033 | "type": "MemberExpression", 1034 | "computed": false, 1035 | "object": { 1036 | "type": "Identifier", 1037 | "name": "sprite", 1038 | "range": [ 1039 | 1013, 1040 | 1019 1041 | ] 1042 | }, 1043 | "property": { 1044 | "type": "Identifier", 1045 | "name": "on", 1046 | "range": [ 1047 | 1020, 1048 | 1022 1049 | ] 1050 | }, 1051 | "range": [ 1052 | 1013, 1053 | 1022 1054 | ] 1055 | }, 1056 | "arguments": [ 1057 | { 1058 | "type": "Literal", 1059 | "value": "pointerdown", 1060 | "raw": "'pointerdown'", 1061 | "range": [ 1062 | 1023, 1063 | 1036 1064 | ] 1065 | }, 1066 | { 1067 | "type": "Identifier", 1068 | "name": "onClick", 1069 | "range": [ 1070 | 1038, 1071 | 1045 1072 | ] 1073 | } 1074 | ], 1075 | "range": [ 1076 | 1013, 1077 | 1046 1078 | ] 1079 | }, 1080 | "range": [ 1081 | 1013, 1082 | 1047 1083 | ], 1084 | "leadingComments": [ 1085 | { 1086 | "type": "Line", 1087 | "value": " Pointers normalize touch and mouse", 1088 | "range": { 1089 | "0": 975, 1090 | "1": 1012 1091 | }, 1092 | "extendedRange": [ 1093 | 973, 1094 | 1013 1095 | ] 1096 | } 1097 | ] 1098 | }, 1099 | { 1100 | "type": "ExpressionStatement", 1101 | "expression": { 1102 | "type": "CallExpression", 1103 | "callee": { 1104 | "type": "MemberExpression", 1105 | "computed": false, 1106 | "object": { 1107 | "type": "MemberExpression", 1108 | "computed": false, 1109 | "object": { 1110 | "type": "Identifier", 1111 | "name": "app", 1112 | "range": [ 1113 | 1188, 1114 | 1191 1115 | ] 1116 | }, 1117 | "property": { 1118 | "type": "Identifier", 1119 | "name": "stage", 1120 | "range": [ 1121 | 1192, 1122 | 1197 1123 | ] 1124 | }, 1125 | "range": [ 1126 | 1188, 1127 | 1197 1128 | ] 1129 | }, 1130 | "property": { 1131 | "type": "Identifier", 1132 | "name": "addChild", 1133 | "range": [ 1134 | 1198, 1135 | 1206 1136 | ] 1137 | }, 1138 | "range": [ 1139 | 1188, 1140 | 1206 1141 | ] 1142 | }, 1143 | "arguments": [ 1144 | { 1145 | "type": "Identifier", 1146 | "name": "sprite", 1147 | "range": [ 1148 | 1207, 1149 | 1213 1150 | ] 1151 | } 1152 | ], 1153 | "range": [ 1154 | 1188, 1155 | 1214 1156 | ] 1157 | }, 1158 | "range": [ 1159 | 1188, 1160 | 1215 1161 | ], 1162 | "leadingComments": [ 1163 | { 1164 | "type": "Line", 1165 | "value": " Alternatively, use the mouse & touch events:", 1166 | "range": { 1167 | "0": 1049, 1168 | "1": 1096 1169 | }, 1170 | "extendedRange": [ 1171 | 1047, 1172 | 1188 1173 | ] 1174 | }, 1175 | { 1176 | "type": "Line", 1177 | "value": " sprite.on('click', onClick); // mouse-only", 1178 | "range": { 1179 | "0": 1097, 1180 | "1": 1142 1181 | }, 1182 | "extendedRange": [ 1183 | 1047, 1184 | 1188 1185 | ] 1186 | }, 1187 | { 1188 | "type": "Line", 1189 | "value": " sprite.on('tap', onClick); // touch-only", 1190 | "range": { 1191 | "0": 1143, 1192 | "1": 1186 1193 | }, 1194 | "extendedRange": [ 1195 | 1047, 1196 | 1188 1197 | ] 1198 | } 1199 | ] 1200 | }, 1201 | { 1202 | "type": "VariableDeclaration", 1203 | "declarations": [ 1204 | { 1205 | "type": "VariableDeclarator", 1206 | "id": { 1207 | "type": "Identifier", 1208 | "name": "x", 1209 | "range": [ 1210 | 1222, 1211 | 1223 1212 | ] 1213 | }, 1214 | "init": { 1215 | "type": "Literal", 1216 | "value": 2, 1217 | "raw": "2", 1218 | "range": [ 1219 | 1226, 1220 | 1227 1221 | ] 1222 | }, 1223 | "range": [ 1224 | 1222, 1225 | 1227 1226 | ] 1227 | } 1228 | ], 1229 | "kind": "var", 1230 | "range": [ 1231 | 1218, 1232 | 1228 1233 | ] 1234 | }, 1235 | { 1236 | "type": "ExpressionStatement", 1237 | "expression": { 1238 | "type": "AssignmentExpression", 1239 | "operator": "=", 1240 | "left": { 1241 | "type": "Identifier", 1242 | "name": "x", 1243 | "range": [ 1244 | 1230, 1245 | 1231 1246 | ] 1247 | }, 1248 | "right": { 1249 | "type": "Literal", 1250 | "value": 3, 1251 | "raw": "3", 1252 | "range": [ 1253 | 1234, 1254 | 1235 1255 | ] 1256 | }, 1257 | "range": [ 1258 | 1230, 1259 | 1235 1260 | ] 1261 | }, 1262 | "range": [ 1263 | 1230, 1264 | 1236 1265 | ] 1266 | } 1267 | ], 1268 | "sourceType": "script", 1269 | "range": [ 1270 | 0, 1271 | 1236 1272 | ], 1273 | "comments": [ 1274 | { 1275 | "type": "Block", 1276 | "value": "\nconsole.log(app.constructor.name);\n", 1277 | "range": [ 1278 | 73, 1279 | 113 1280 | ] 1281 | }, 1282 | { 1283 | "type": "Line", 1284 | "value": " Scale mode for all textures, will retain pixelation", 1285 | "range": [ 1286 | 152, 1287 | 206 1288 | ] 1289 | }, 1290 | { 1291 | "type": "Line", 1292 | "value": " Set the initial position", 1293 | "range": [ 1294 | 360, 1295 | 387 1296 | ] 1297 | }, 1298 | { 1299 | "type": "Line", 1300 | "value": " Opt-in to interactivity", 1301 | "range": [ 1302 | 480, 1303 | 506 1304 | ] 1305 | }, 1306 | { 1307 | "type": "Line", 1308 | "value": " Shows hand cursor", 1309 | "range": [ 1310 | 535, 1311 | 555 1312 | ] 1313 | }, 1314 | { 1315 | "type": "Block", 1316 | "value": " PS: Functions are not automatically lifted and must be in order for\n * generated script to use them correctly. ", 1317 | "range": [ 1318 | 583, 1319 | 699 1320 | ] 1321 | }, 1322 | { 1323 | "type": "Block", 1324 | "value": " PS: Make sure your event handlers are called at least once by script ", 1325 | "range": [ 1326 | 726, 1327 | 800 1328 | ] 1329 | }, 1330 | { 1331 | "type": "Block", 1332 | "value": " PS: Make sure your event handlers are called at least once by script, like\n * in the following line: ", 1333 | "range": [ 1334 | 856, 1335 | 962 1336 | ] 1337 | }, 1338 | { 1339 | "type": "Line", 1340 | "value": " Pointers normalize touch and mouse", 1341 | "range": [ 1342 | 975, 1343 | 1012 1344 | ] 1345 | }, 1346 | { 1347 | "type": "Line", 1348 | "value": " Alternatively, use the mouse & touch events:", 1349 | "range": [ 1350 | 1049, 1351 | 1096 1352 | ] 1353 | }, 1354 | { 1355 | "type": "Line", 1356 | "value": " sprite.on('click', onClick); // mouse-only", 1357 | "range": [ 1358 | 1097, 1359 | 1142 1360 | ] 1361 | }, 1362 | { 1363 | "type": "Line", 1364 | "value": " sprite.on('tap', onClick); // touch-only", 1365 | "range": [ 1366 | 1143, 1367 | 1186 1368 | ] 1369 | } 1370 | ], 1371 | "tokens": [ 1372 | { 1373 | "type": "Keyword", 1374 | "value": "var", 1375 | "range": [ 1376 | 0, 1377 | 3 1378 | ] 1379 | }, 1380 | { 1381 | "type": "Identifier", 1382 | "value": "app", 1383 | "range": [ 1384 | 4, 1385 | 7 1386 | ] 1387 | }, 1388 | { 1389 | "type": "Punctuator", 1390 | "value": "=", 1391 | "range": [ 1392 | 8, 1393 | 9 1394 | ] 1395 | }, 1396 | { 1397 | "type": "Keyword", 1398 | "value": "new", 1399 | "range": [ 1400 | 10, 1401 | 13 1402 | ] 1403 | }, 1404 | { 1405 | "type": "Identifier", 1406 | "value": "PIXI", 1407 | "range": [ 1408 | 14, 1409 | 18 1410 | ] 1411 | }, 1412 | { 1413 | "type": "Punctuator", 1414 | "value": ".", 1415 | "range": [ 1416 | 18, 1417 | 19 1418 | ] 1419 | }, 1420 | { 1421 | "type": "Identifier", 1422 | "value": "Application", 1423 | "range": [ 1424 | 19, 1425 | 30 1426 | ] 1427 | }, 1428 | { 1429 | "type": "Punctuator", 1430 | "value": "(", 1431 | "range": [ 1432 | 30, 1433 | 31 1434 | ] 1435 | }, 1436 | { 1437 | "type": "Numeric", 1438 | "value": "800", 1439 | "range": [ 1440 | 31, 1441 | 34 1442 | ] 1443 | }, 1444 | { 1445 | "type": "Punctuator", 1446 | "value": ",", 1447 | "range": [ 1448 | 34, 1449 | 35 1450 | ] 1451 | }, 1452 | { 1453 | "type": "Numeric", 1454 | "value": "600", 1455 | "range": [ 1456 | 36, 1457 | 39 1458 | ] 1459 | }, 1460 | { 1461 | "type": "Punctuator", 1462 | "value": ",", 1463 | "range": [ 1464 | 39, 1465 | 40 1466 | ] 1467 | }, 1468 | { 1469 | "type": "Punctuator", 1470 | "value": "{", 1471 | "range": [ 1472 | 41, 1473 | 42 1474 | ] 1475 | }, 1476 | { 1477 | "type": "Identifier", 1478 | "value": "backgroundColor", 1479 | "range": [ 1480 | 43, 1481 | 58 1482 | ] 1483 | }, 1484 | { 1485 | "type": "Punctuator", 1486 | "value": ":", 1487 | "range": [ 1488 | 58, 1489 | 59 1490 | ] 1491 | }, 1492 | { 1493 | "type": "Numeric", 1494 | "value": "0x1099bb", 1495 | "range": [ 1496 | 60, 1497 | 68 1498 | ] 1499 | }, 1500 | { 1501 | "type": "Punctuator", 1502 | "value": "}", 1503 | "range": [ 1504 | 69, 1505 | 70 1506 | ] 1507 | }, 1508 | { 1509 | "type": "Punctuator", 1510 | "value": ")", 1511 | "range": [ 1512 | 70, 1513 | 71 1514 | ] 1515 | }, 1516 | { 1517 | "type": "Punctuator", 1518 | "value": ";", 1519 | "range": [ 1520 | 71, 1521 | 72 1522 | ] 1523 | }, 1524 | { 1525 | "type": "Identifier", 1526 | "value": "document", 1527 | "range": [ 1528 | 114, 1529 | 122 1530 | ] 1531 | }, 1532 | { 1533 | "type": "Punctuator", 1534 | "value": ".", 1535 | "range": [ 1536 | 122, 1537 | 123 1538 | ] 1539 | }, 1540 | { 1541 | "type": "Identifier", 1542 | "value": "body", 1543 | "range": [ 1544 | 123, 1545 | 127 1546 | ] 1547 | }, 1548 | { 1549 | "type": "Punctuator", 1550 | "value": ".", 1551 | "range": [ 1552 | 127, 1553 | 128 1554 | ] 1555 | }, 1556 | { 1557 | "type": "Identifier", 1558 | "value": "appendChild", 1559 | "range": [ 1560 | 128, 1561 | 139 1562 | ] 1563 | }, 1564 | { 1565 | "type": "Punctuator", 1566 | "value": "(", 1567 | "range": [ 1568 | 139, 1569 | 140 1570 | ] 1571 | }, 1572 | { 1573 | "type": "Identifier", 1574 | "value": "app", 1575 | "range": [ 1576 | 140, 1577 | 143 1578 | ] 1579 | }, 1580 | { 1581 | "type": "Punctuator", 1582 | "value": ".", 1583 | "range": [ 1584 | 143, 1585 | 144 1586 | ] 1587 | }, 1588 | { 1589 | "type": "Identifier", 1590 | "value": "view", 1591 | "range": [ 1592 | 144, 1593 | 148 1594 | ] 1595 | }, 1596 | { 1597 | "type": "Punctuator", 1598 | "value": ")", 1599 | "range": [ 1600 | 148, 1601 | 149 1602 | ] 1603 | }, 1604 | { 1605 | "type": "Punctuator", 1606 | "value": ";", 1607 | "range": [ 1608 | 149, 1609 | 150 1610 | ] 1611 | }, 1612 | { 1613 | "type": "Identifier", 1614 | "value": "PIXI", 1615 | "range": [ 1616 | 207, 1617 | 211 1618 | ] 1619 | }, 1620 | { 1621 | "type": "Punctuator", 1622 | "value": ".", 1623 | "range": [ 1624 | 211, 1625 | 212 1626 | ] 1627 | }, 1628 | { 1629 | "type": "Identifier", 1630 | "value": "settings", 1631 | "range": [ 1632 | 212, 1633 | 220 1634 | ] 1635 | }, 1636 | { 1637 | "type": "Punctuator", 1638 | "value": ".", 1639 | "range": [ 1640 | 220, 1641 | 221 1642 | ] 1643 | }, 1644 | { 1645 | "type": "Identifier", 1646 | "value": "SCALE_MODE", 1647 | "range": [ 1648 | 221, 1649 | 231 1650 | ] 1651 | }, 1652 | { 1653 | "type": "Punctuator", 1654 | "value": "=", 1655 | "range": [ 1656 | 232, 1657 | 233 1658 | ] 1659 | }, 1660 | { 1661 | "type": "Identifier", 1662 | "value": "PIXI", 1663 | "range": [ 1664 | 234, 1665 | 238 1666 | ] 1667 | }, 1668 | { 1669 | "type": "Punctuator", 1670 | "value": ".", 1671 | "range": [ 1672 | 238, 1673 | 239 1674 | ] 1675 | }, 1676 | { 1677 | "type": "Identifier", 1678 | "value": "SCALE_MODES", 1679 | "range": [ 1680 | 239, 1681 | 250 1682 | ] 1683 | }, 1684 | { 1685 | "type": "Punctuator", 1686 | "value": ".", 1687 | "range": [ 1688 | 250, 1689 | 251 1690 | ] 1691 | }, 1692 | { 1693 | "type": "Identifier", 1694 | "value": "NEAREST", 1695 | "range": [ 1696 | 251, 1697 | 258 1698 | ] 1699 | }, 1700 | { 1701 | "type": "Punctuator", 1702 | "value": ";", 1703 | "range": [ 1704 | 258, 1705 | 259 1706 | ] 1707 | }, 1708 | { 1709 | "type": "Keyword", 1710 | "value": "var", 1711 | "range": [ 1712 | 261, 1713 | 264 1714 | ] 1715 | }, 1716 | { 1717 | "type": "Identifier", 1718 | "value": "sprite", 1719 | "range": [ 1720 | 265, 1721 | 271 1722 | ] 1723 | }, 1724 | { 1725 | "type": "Punctuator", 1726 | "value": "=", 1727 | "range": [ 1728 | 272, 1729 | 273 1730 | ] 1731 | }, 1732 | { 1733 | "type": "Identifier", 1734 | "value": "PIXI", 1735 | "range": [ 1736 | 274, 1737 | 278 1738 | ] 1739 | }, 1740 | { 1741 | "type": "Punctuator", 1742 | "value": ".", 1743 | "range": [ 1744 | 278, 1745 | 279 1746 | ] 1747 | }, 1748 | { 1749 | "type": "Identifier", 1750 | "value": "Sprite", 1751 | "range": [ 1752 | 279, 1753 | 285 1754 | ] 1755 | }, 1756 | { 1757 | "type": "Punctuator", 1758 | "value": ".", 1759 | "range": [ 1760 | 285, 1761 | 286 1762 | ] 1763 | }, 1764 | { 1765 | "type": "Identifier", 1766 | "value": "fromImage", 1767 | "range": [ 1768 | 286, 1769 | 295 1770 | ] 1771 | }, 1772 | { 1773 | "type": "Punctuator", 1774 | "value": "(", 1775 | "range": [ 1776 | 295, 1777 | 296 1778 | ] 1779 | }, 1780 | { 1781 | "type": "String", 1782 | "value": "'http://pixijs.io/examples/required/assets/basics/bunny.png'", 1783 | "range": [ 1784 | 296, 1785 | 356 1786 | ] 1787 | }, 1788 | { 1789 | "type": "Punctuator", 1790 | "value": ")", 1791 | "range": [ 1792 | 356, 1793 | 357 1794 | ] 1795 | }, 1796 | { 1797 | "type": "Punctuator", 1798 | "value": ";", 1799 | "range": [ 1800 | 357, 1801 | 358 1802 | ] 1803 | }, 1804 | { 1805 | "type": "Identifier", 1806 | "value": "sprite", 1807 | "range": [ 1808 | 388, 1809 | 394 1810 | ] 1811 | }, 1812 | { 1813 | "type": "Punctuator", 1814 | "value": ".", 1815 | "range": [ 1816 | 394, 1817 | 395 1818 | ] 1819 | }, 1820 | { 1821 | "type": "Identifier", 1822 | "value": "anchor", 1823 | "range": [ 1824 | 395, 1825 | 401 1826 | ] 1827 | }, 1828 | { 1829 | "type": "Punctuator", 1830 | "value": ".", 1831 | "range": [ 1832 | 401, 1833 | 402 1834 | ] 1835 | }, 1836 | { 1837 | "type": "Identifier", 1838 | "value": "set", 1839 | "range": [ 1840 | 402, 1841 | 405 1842 | ] 1843 | }, 1844 | { 1845 | "type": "Punctuator", 1846 | "value": "(", 1847 | "range": [ 1848 | 405, 1849 | 406 1850 | ] 1851 | }, 1852 | { 1853 | "type": "Numeric", 1854 | "value": "0.5", 1855 | "range": [ 1856 | 406, 1857 | 409 1858 | ] 1859 | }, 1860 | { 1861 | "type": "Punctuator", 1862 | "value": ")", 1863 | "range": [ 1864 | 409, 1865 | 410 1866 | ] 1867 | }, 1868 | { 1869 | "type": "Punctuator", 1870 | "value": ";", 1871 | "range": [ 1872 | 410, 1873 | 411 1874 | ] 1875 | }, 1876 | { 1877 | "type": "Identifier", 1878 | "value": "sprite", 1879 | "range": [ 1880 | 412, 1881 | 418 1882 | ] 1883 | }, 1884 | { 1885 | "type": "Punctuator", 1886 | "value": ".", 1887 | "range": [ 1888 | 418, 1889 | 419 1890 | ] 1891 | }, 1892 | { 1893 | "type": "Identifier", 1894 | "value": "x", 1895 | "range": [ 1896 | 419, 1897 | 420 1898 | ] 1899 | }, 1900 | { 1901 | "type": "Punctuator", 1902 | "value": "=", 1903 | "range": [ 1904 | 421, 1905 | 422 1906 | ] 1907 | }, 1908 | { 1909 | "type": "Identifier", 1910 | "value": "app", 1911 | "range": [ 1912 | 423, 1913 | 426 1914 | ] 1915 | }, 1916 | { 1917 | "type": "Punctuator", 1918 | "value": ".", 1919 | "range": [ 1920 | 426, 1921 | 427 1922 | ] 1923 | }, 1924 | { 1925 | "type": "Identifier", 1926 | "value": "screen", 1927 | "range": [ 1928 | 427, 1929 | 433 1930 | ] 1931 | }, 1932 | { 1933 | "type": "Punctuator", 1934 | "value": ".", 1935 | "range": [ 1936 | 433, 1937 | 434 1938 | ] 1939 | }, 1940 | { 1941 | "type": "Identifier", 1942 | "value": "width", 1943 | "range": [ 1944 | 434, 1945 | 439 1946 | ] 1947 | }, 1948 | { 1949 | "type": "Punctuator", 1950 | "value": "/", 1951 | "range": [ 1952 | 440, 1953 | 441 1954 | ] 1955 | }, 1956 | { 1957 | "type": "Numeric", 1958 | "value": "2", 1959 | "range": [ 1960 | 442, 1961 | 443 1962 | ] 1963 | }, 1964 | { 1965 | "type": "Punctuator", 1966 | "value": ";", 1967 | "range": [ 1968 | 443, 1969 | 444 1970 | ] 1971 | }, 1972 | { 1973 | "type": "Identifier", 1974 | "value": "sprite", 1975 | "range": [ 1976 | 445, 1977 | 451 1978 | ] 1979 | }, 1980 | { 1981 | "type": "Punctuator", 1982 | "value": ".", 1983 | "range": [ 1984 | 451, 1985 | 452 1986 | ] 1987 | }, 1988 | { 1989 | "type": "Identifier", 1990 | "value": "y", 1991 | "range": [ 1992 | 452, 1993 | 453 1994 | ] 1995 | }, 1996 | { 1997 | "type": "Punctuator", 1998 | "value": "=", 1999 | "range": [ 2000 | 454, 2001 | 455 2002 | ] 2003 | }, 2004 | { 2005 | "type": "Identifier", 2006 | "value": "app", 2007 | "range": [ 2008 | 456, 2009 | 459 2010 | ] 2011 | }, 2012 | { 2013 | "type": "Punctuator", 2014 | "value": ".", 2015 | "range": [ 2016 | 459, 2017 | 460 2018 | ] 2019 | }, 2020 | { 2021 | "type": "Identifier", 2022 | "value": "screen", 2023 | "range": [ 2024 | 460, 2025 | 466 2026 | ] 2027 | }, 2028 | { 2029 | "type": "Punctuator", 2030 | "value": ".", 2031 | "range": [ 2032 | 466, 2033 | 467 2034 | ] 2035 | }, 2036 | { 2037 | "type": "Identifier", 2038 | "value": "height", 2039 | "range": [ 2040 | 467, 2041 | 473 2042 | ] 2043 | }, 2044 | { 2045 | "type": "Punctuator", 2046 | "value": "/", 2047 | "range": [ 2048 | 474, 2049 | 475 2050 | ] 2051 | }, 2052 | { 2053 | "type": "Numeric", 2054 | "value": "2", 2055 | "range": [ 2056 | 476, 2057 | 477 2058 | ] 2059 | }, 2060 | { 2061 | "type": "Punctuator", 2062 | "value": ";", 2063 | "range": [ 2064 | 477, 2065 | 478 2066 | ] 2067 | }, 2068 | { 2069 | "type": "Identifier", 2070 | "value": "sprite", 2071 | "range": [ 2072 | 507, 2073 | 513 2074 | ] 2075 | }, 2076 | { 2077 | "type": "Punctuator", 2078 | "value": ".", 2079 | "range": [ 2080 | 513, 2081 | 514 2082 | ] 2083 | }, 2084 | { 2085 | "type": "Identifier", 2086 | "value": "interactive", 2087 | "range": [ 2088 | 514, 2089 | 525 2090 | ] 2091 | }, 2092 | { 2093 | "type": "Punctuator", 2094 | "value": "=", 2095 | "range": [ 2096 | 526, 2097 | 527 2098 | ] 2099 | }, 2100 | { 2101 | "type": "Boolean", 2102 | "value": "true", 2103 | "range": [ 2104 | 528, 2105 | 532 2106 | ] 2107 | }, 2108 | { 2109 | "type": "Punctuator", 2110 | "value": ";", 2111 | "range": [ 2112 | 532, 2113 | 533 2114 | ] 2115 | }, 2116 | { 2117 | "type": "Identifier", 2118 | "value": "sprite", 2119 | "range": [ 2120 | 556, 2121 | 562 2122 | ] 2123 | }, 2124 | { 2125 | "type": "Punctuator", 2126 | "value": ".", 2127 | "range": [ 2128 | 562, 2129 | 563 2130 | ] 2131 | }, 2132 | { 2133 | "type": "Identifier", 2134 | "value": "buttonMode", 2135 | "range": [ 2136 | 563, 2137 | 573 2138 | ] 2139 | }, 2140 | { 2141 | "type": "Punctuator", 2142 | "value": "=", 2143 | "range": [ 2144 | 574, 2145 | 575 2146 | ] 2147 | }, 2148 | { 2149 | "type": "Boolean", 2150 | "value": "true", 2151 | "range": [ 2152 | 576, 2153 | 580 2154 | ] 2155 | }, 2156 | { 2157 | "type": "Punctuator", 2158 | "value": ";", 2159 | "range": [ 2160 | 580, 2161 | 581 2162 | ] 2163 | }, 2164 | { 2165 | "type": "Keyword", 2166 | "value": "function", 2167 | "range": [ 2168 | 700, 2169 | 708 2170 | ] 2171 | }, 2172 | { 2173 | "type": "Identifier", 2174 | "value": "onClick", 2175 | "range": [ 2176 | 709, 2177 | 716 2178 | ] 2179 | }, 2180 | { 2181 | "type": "Punctuator", 2182 | "value": "(", 2183 | "range": [ 2184 | 716, 2185 | 717 2186 | ] 2187 | }, 2188 | { 2189 | "type": "Identifier", 2190 | "value": "evt", 2191 | "range": [ 2192 | 717, 2193 | 720 2194 | ] 2195 | }, 2196 | { 2197 | "type": "Punctuator", 2198 | "value": ")", 2199 | "range": [ 2200 | 720, 2201 | 721 2202 | ] 2203 | }, 2204 | { 2205 | "type": "Punctuator", 2206 | "value": "{", 2207 | "range": [ 2208 | 722, 2209 | 723 2210 | ] 2211 | }, 2212 | { 2213 | "type": "Identifier", 2214 | "value": "sprite", 2215 | "range": [ 2216 | 803, 2217 | 809 2218 | ] 2219 | }, 2220 | { 2221 | "type": "Punctuator", 2222 | "value": ".", 2223 | "range": [ 2224 | 809, 2225 | 810 2226 | ] 2227 | }, 2228 | { 2229 | "type": "Identifier", 2230 | "value": "scale", 2231 | "range": [ 2232 | 810, 2233 | 815 2234 | ] 2235 | }, 2236 | { 2237 | "type": "Punctuator", 2238 | "value": ".", 2239 | "range": [ 2240 | 815, 2241 | 816 2242 | ] 2243 | }, 2244 | { 2245 | "type": "Identifier", 2246 | "value": "x", 2247 | "range": [ 2248 | 816, 2249 | 817 2250 | ] 2251 | }, 2252 | { 2253 | "type": "Punctuator", 2254 | "value": "*=", 2255 | "range": [ 2256 | 818, 2257 | 820 2258 | ] 2259 | }, 2260 | { 2261 | "type": "Numeric", 2262 | "value": "1.25", 2263 | "range": [ 2264 | 821, 2265 | 825 2266 | ] 2267 | }, 2268 | { 2269 | "type": "Punctuator", 2270 | "value": ";", 2271 | "range": [ 2272 | 825, 2273 | 826 2274 | ] 2275 | }, 2276 | { 2277 | "type": "Identifier", 2278 | "value": "sprite", 2279 | "range": [ 2280 | 829, 2281 | 835 2282 | ] 2283 | }, 2284 | { 2285 | "type": "Punctuator", 2286 | "value": ".", 2287 | "range": [ 2288 | 835, 2289 | 836 2290 | ] 2291 | }, 2292 | { 2293 | "type": "Identifier", 2294 | "value": "scale", 2295 | "range": [ 2296 | 836, 2297 | 841 2298 | ] 2299 | }, 2300 | { 2301 | "type": "Punctuator", 2302 | "value": ".", 2303 | "range": [ 2304 | 841, 2305 | 842 2306 | ] 2307 | }, 2308 | { 2309 | "type": "Identifier", 2310 | "value": "y", 2311 | "range": [ 2312 | 842, 2313 | 843 2314 | ] 2315 | }, 2316 | { 2317 | "type": "Punctuator", 2318 | "value": "*=", 2319 | "range": [ 2320 | 844, 2321 | 846 2322 | ] 2323 | }, 2324 | { 2325 | "type": "Numeric", 2326 | "value": "1.25", 2327 | "range": [ 2328 | 847, 2329 | 851 2330 | ] 2331 | }, 2332 | { 2333 | "type": "Punctuator", 2334 | "value": ";", 2335 | "range": [ 2336 | 851, 2337 | 852 2338 | ] 2339 | }, 2340 | { 2341 | "type": "Punctuator", 2342 | "value": "}", 2343 | "range": [ 2344 | 853, 2345 | 854 2346 | ] 2347 | }, 2348 | { 2349 | "type": "Identifier", 2350 | "value": "onClick", 2351 | "range": [ 2352 | 963, 2353 | 970 2354 | ] 2355 | }, 2356 | { 2357 | "type": "Punctuator", 2358 | "value": "(", 2359 | "range": [ 2360 | 970, 2361 | 971 2362 | ] 2363 | }, 2364 | { 2365 | "type": "Punctuator", 2366 | "value": ")", 2367 | "range": [ 2368 | 971, 2369 | 972 2370 | ] 2371 | }, 2372 | { 2373 | "type": "Punctuator", 2374 | "value": ";", 2375 | "range": [ 2376 | 972, 2377 | 973 2378 | ] 2379 | }, 2380 | { 2381 | "type": "Identifier", 2382 | "value": "sprite", 2383 | "range": [ 2384 | 1013, 2385 | 1019 2386 | ] 2387 | }, 2388 | { 2389 | "type": "Punctuator", 2390 | "value": ".", 2391 | "range": [ 2392 | 1019, 2393 | 1020 2394 | ] 2395 | }, 2396 | { 2397 | "type": "Identifier", 2398 | "value": "on", 2399 | "range": [ 2400 | 1020, 2401 | 1022 2402 | ] 2403 | }, 2404 | { 2405 | "type": "Punctuator", 2406 | "value": "(", 2407 | "range": [ 2408 | 1022, 2409 | 1023 2410 | ] 2411 | }, 2412 | { 2413 | "type": "String", 2414 | "value": "'pointerdown'", 2415 | "range": [ 2416 | 1023, 2417 | 1036 2418 | ] 2419 | }, 2420 | { 2421 | "type": "Punctuator", 2422 | "value": ",", 2423 | "range": [ 2424 | 1036, 2425 | 1037 2426 | ] 2427 | }, 2428 | { 2429 | "type": "Identifier", 2430 | "value": "onClick", 2431 | "range": [ 2432 | 1038, 2433 | 1045 2434 | ] 2435 | }, 2436 | { 2437 | "type": "Punctuator", 2438 | "value": ")", 2439 | "range": [ 2440 | 1045, 2441 | 1046 2442 | ] 2443 | }, 2444 | { 2445 | "type": "Punctuator", 2446 | "value": ";", 2447 | "range": [ 2448 | 1046, 2449 | 1047 2450 | ] 2451 | }, 2452 | { 2453 | "type": "Identifier", 2454 | "value": "app", 2455 | "range": [ 2456 | 1188, 2457 | 1191 2458 | ] 2459 | }, 2460 | { 2461 | "type": "Punctuator", 2462 | "value": ".", 2463 | "range": [ 2464 | 1191, 2465 | 1192 2466 | ] 2467 | }, 2468 | { 2469 | "type": "Identifier", 2470 | "value": "stage", 2471 | "range": [ 2472 | 1192, 2473 | 1197 2474 | ] 2475 | }, 2476 | { 2477 | "type": "Punctuator", 2478 | "value": ".", 2479 | "range": [ 2480 | 1197, 2481 | 1198 2482 | ] 2483 | }, 2484 | { 2485 | "type": "Identifier", 2486 | "value": "addChild", 2487 | "range": [ 2488 | 1198, 2489 | 1206 2490 | ] 2491 | }, 2492 | { 2493 | "type": "Punctuator", 2494 | "value": "(", 2495 | "range": [ 2496 | 1206, 2497 | 1207 2498 | ] 2499 | }, 2500 | { 2501 | "type": "Identifier", 2502 | "value": "sprite", 2503 | "range": [ 2504 | 1207, 2505 | 1213 2506 | ] 2507 | }, 2508 | { 2509 | "type": "Punctuator", 2510 | "value": ")", 2511 | "range": [ 2512 | 1213, 2513 | 1214 2514 | ] 2515 | }, 2516 | { 2517 | "type": "Punctuator", 2518 | "value": ";", 2519 | "range": [ 2520 | 1214, 2521 | 1215 2522 | ] 2523 | }, 2524 | { 2525 | "type": "Keyword", 2526 | "value": "var", 2527 | "range": [ 2528 | 1218, 2529 | 1221 2530 | ] 2531 | }, 2532 | { 2533 | "type": "Identifier", 2534 | "value": "x", 2535 | "range": [ 2536 | 1222, 2537 | 1223 2538 | ] 2539 | }, 2540 | { 2541 | "type": "Punctuator", 2542 | "value": "=", 2543 | "range": [ 2544 | 1224, 2545 | 1225 2546 | ] 2547 | }, 2548 | { 2549 | "type": "Numeric", 2550 | "value": "2", 2551 | "range": [ 2552 | 1226, 2553 | 1227 2554 | ] 2555 | }, 2556 | { 2557 | "type": "Punctuator", 2558 | "value": ";", 2559 | "range": [ 2560 | 1227, 2561 | 1228 2562 | ] 2563 | }, 2564 | { 2565 | "type": "Identifier", 2566 | "value": "x", 2567 | "range": [ 2568 | 1230, 2569 | 1231 2570 | ] 2571 | }, 2572 | { 2573 | "type": "Punctuator", 2574 | "value": "=", 2575 | "range": [ 2576 | 1232, 2577 | 1233 2578 | ] 2579 | }, 2580 | { 2581 | "type": "Numeric", 2582 | "value": "3", 2583 | "range": [ 2584 | 1234, 2585 | 1235 2586 | ] 2587 | }, 2588 | { 2589 | "type": "Punctuator", 2590 | "value": ";", 2591 | "range": [ 2592 | 1235, 2593 | 1236 2594 | ] 2595 | } 2596 | ] 2597 | } 2598 | -------------------------------------------------------------------------------- /src/example.txt: -------------------------------------------------------------------------------- 1 | var app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb }); 2 | /* 3 | console.log(app.constructor.name); 4 | */ 5 | document.body.appendChild(app.view); 6 | 7 | // Scale mode for all textures, will retain pixelation 8 | PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST; 9 | 10 | var sprite = PIXI.Sprite.fromImage('http://pixijs.io/examples/required/assets/basics/bunny.png'); 11 | 12 | // Set the initial position 13 | sprite.anchor.set(0.5); 14 | sprite.x = app.screen.width / 2; 15 | sprite.y = app.screen.height / 2; 16 | 17 | // Opt-in to interactivity 18 | sprite.interactive = true; 19 | 20 | // Shows hand cursor 21 | sprite.buttonMode = true; 22 | 23 | /* PS: Functions are not automatically lifted and must be in order for 24 | * generated script to use them correctly. */ 25 | function onClick(evt) { 26 | /* PS: Make sure your event handlers are called at least once by script */ 27 | console.log(evt); 28 | sprite.scale.x *= 1.25; 29 | sprite.scale.y *= 1.25; 30 | return 0; 31 | } 32 | 33 | // Pointers normalize touch and mouse 34 | sprite.on('pointerdown', onClick); 35 | 36 | /* PS: Make sure your event handlers are called at least once by script, and 37 | * done after function passed around, like in the following line: */ 38 | onClick(new Event('test')); 39 | 40 | // Alternatively, use the mouse & touch events: 41 | // sprite.on('click', onClick); // mouse-only 42 | // sprite.on('tap', onClick); // touch-only 43 | 44 | app.stage.addChild(sprite); 45 | 46 | var f = function(test) { 47 | if (test) { 48 | console.log("hello"); 49 | } else { 50 | console.log("blah"); 51 | } 52 | }; 53 | 54 | /* It is up to you to ensure every code path is evaluated at elast once, as 55 | follows for example: */ 56 | f(true); 57 | f(false); 58 | 59 | var x = 3; 60 | 61 | x *= 2; 62 | -------------------------------------------------------------------------------- /src/external.js: -------------------------------------------------------------------------------- 1 | var A = function(arg) { this.x = arg; }; 2 | exports.A = A; 3 | exports.createA = function(arg) { 4 | return new A(arg); 5 | }; 6 | exports.acceptA1 = function(a) { return a.x; }; 7 | exports.scoped = { 8 | scoped2: { 9 | acceptA3: function(a) { return a.x; } 10 | }, 11 | acceptA2: function(a) { return a.x; } 12 | }; 13 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /* PIXI required only for convenience of fast dev iter on example */ 2 | 3 | import css from '../css/codemirror.css'; 4 | 5 | /* 6 | import scriptData from '../examples/pixiBasicsMega.txt'; 7 | */ 8 | 9 | import scriptData from './example.txt'; 10 | 11 | var evalTimeout = 10000; 12 | 13 | var PIXI = require('pixi.js'); 14 | 15 | var CodeMirror = require('codemirror'); 16 | 17 | var $ = require('jquery'); 18 | 19 | require('codemirror/mode/javascript/javascript'); 20 | 21 | require('codemirror/mode/mllike/mllike'); 22 | 23 | var Lib = require('./lib.js'); 24 | 25 | Lib.debug[0] = true; 26 | 27 | $('document').ready(function() { 28 | /* Load CodeMirror CSS */ 29 | /* 30 | $('head').append( $('').attr('href', 31 | 'css/codemirror.css')); 32 | */ 33 | var onLoad = function(data) { 34 | $('body').append('

Introduction

'); 35 | $('body').append('

Welcome to my very hacky JavaScript to ReasonML transpiler ' + 36 | '(Project on GitHub)! ' + 37 | 'If you do not see any code below, try reloading the page ' + 38 | '(bug due to race conditions resolved by cached files I suppose).' + 39 | 'You might also check out the alternative Jeason. ' + 40 | 'Paste your code in the Code to Transpile ' + 41 | 'and the script will try to convert it into ReasonML externs and code. ' + 42 | 'WARNING: Example code will be evaled in a rewritten form to fill in the types. ' + 43 | 'Untriggered event handlers and functions will not be translated. ' + 44 | 'Just some basics are supported for now, and it is sure to be buggy, ' + 45 | 'but it might be more helpful than starting from scratch.

' + 46 | '

Make sure your example code does not clear the DOM, or you will lose the output boxes.

' + 47 | '

While you are transpiling there will be a red border around ' + 48 | ' code with unresolved types in the editor.

' 49 | ); 50 | 51 | $('body').append('

Code to Transpile

' + 52 | '
'); 53 | var textarea = $('#example'); 54 | textarea.val(data); 55 | var editor = CodeMirror.fromTextArea(textarea[0], { 56 | lineNumbers: true, 57 | mode: 'javascript' 58 | }); 59 | 60 | $('body').append('

Library code

' + 61 | '

Paste extra library code here. ' + 62 | 'Will be evaluated for example code to use, but not attempted translated. ' + 63 | '

'); 64 | var libarea = $('#libsource'); 65 | var pixiURL = 'https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.js'; 66 | libarea.val('$.getScript("' + pixiURL + '", function(data) { console.log("Library loaded"); });'); 67 | 68 | var editor2 = CodeMirror.fromTextArea(libarea[0], { 69 | lineNumbers: true, 70 | mode: 'javascript' 71 | }); 72 | 73 | $('body').append('

ReasonML Output

'); 74 | 75 | $('body').append( 76 | '
' + 77 | '' + 78 | '' + 79 | '' + 80 | '
'); 81 | 82 | $('body').append(''); 83 | var resultarea = $("#result"); 84 | var editor3 = CodeMirror.fromTextArea(resultarea[0], { 85 | lineNumbers: true, 86 | mode: 'mllike' 87 | }); 88 | 89 | $("#loadlibs").on("click", function() { 90 | eval(editor2.getDoc().getValue()); 91 | }); 92 | var transpile = async function() { 93 | var result; 94 | editor3.getDoc().setValue("Waiting for eval to load resources etc: " + evalTimeout + "ms..."); 95 | try { 96 | result = await Lib.compile(editor.getDoc().getValue(), evalTimeout); 97 | } catch(error) { 98 | result = error.stack.toString(); 99 | editor3.getDoc().setValue(result); 100 | throw(error); 101 | } 102 | editor3.getDoc().setValue(result); 103 | }; 104 | var getAST = function() { 105 | var result; 106 | try { 107 | result = Lib.compileAST(editor.getDoc().getValue()); 108 | } catch(error) { 109 | result = error.stack.toString(); 110 | editor3.getDoc().setValue(result); 111 | throw(error); 112 | } 113 | editor3.getDoc().setValue(result); 114 | }; 115 | $("#transpile").on("click", transpile); 116 | $("#getAst").on("click", getAST); 117 | 118 | $('body').append('

Eval DOM Output

'); 119 | 120 | var storedUnresolvedNodes = {}; 121 | var updateUI = function() { 122 | var root = editor.getWrapperElement(); 123 | var text = ''; 124 | var charmap = []; 125 | for (var i = 0; i < scriptData.length; i++) { 126 | charmap[i] = false; 127 | } 128 | for (var index in storedUnresolvedNodes) { 129 | var astNode = storedUnresolvedNodes[index]; 130 | /* 131 | console.log(astNode.range[0], astNode.range[1]); 132 | */ 133 | for (var i = astNode.range[0]; i < astNode.range[1]; i++) { 134 | charmap[i] = true; 135 | } 136 | } 137 | var unresolvedCode = ''; 138 | for (var i = 0; i < charmap.length; i++) { 139 | if (charmap[i] == true) { 140 | unresolvedCode += scriptData[i]; 141 | }; 142 | } 143 | /* 144 | console.log(unresolvedCode); 145 | */ 146 | var markNodes = []; 147 | var removeZeroWidth = function(s) { 148 | return s.replace(/[\u200B-\u200D\uFEFF]/g, ''); 149 | }; 150 | var walk = function(index, node, parentUnresolved) { 151 | var oldLength = text.length; 152 | var isUnresolved = [true]; 153 | $(node) 154 | .contents() 155 | .each(function(i, v) { 156 | if ($(v).parent().is("span") && v.nodeType === 3) { 157 | /* 158 | text += $(v).text(); 159 | */ 160 | /* 161 | var str = v.nodeValue.trim(); 162 | */ 163 | var str = removeZeroWidth(v.nodeValue); 164 | /* 165 | text += str; 166 | */ 167 | if (str.length > 0) { 168 | text += str; 169 | /* 170 | if (!editor.getDoc().getValue().startsWith(text)) { 171 | console.log("text", text, "str", str.length, JSON.stringify(str)); 172 | throw new Error("length mismatch"); 173 | } 174 | */ 175 | } 176 | } else { 177 | if (!$(v).is(".CodeMirror-linenumber")) { 178 | walk(i, v, isUnresolved); 179 | } 180 | } 181 | if ($(v).is(".CodeMirror-line")) { 182 | text += '\n'; 183 | } 184 | }); 185 | var content = removeZeroWidth($(node).text()).trim() === ''; 186 | if (oldLength === text.length || content === '' || text.length >= charmap.length) { 187 | isUnresolved[0] = false; 188 | } else { 189 | } 190 | for (var i = oldLength; i < text.length; i++) { 191 | if (charmap[i] == false) { 192 | isUnresolved[0] = false; 193 | break; 194 | } 195 | } 196 | markNodes.push(function() { 197 | if (!parentUnresolved[0] && isUnresolved[0]) { 198 | $(node).addClass("marked"); 199 | } else { 200 | $(node).removeClass("marked"); 201 | } 202 | }); 203 | /* 204 | $(node).children().each(walk); 205 | */ 206 | }; 207 | walk(0, $(root).find(".CodeMirror-code"), [false]); 208 | for (var f of markNodes) { 209 | f(); 210 | } 211 | /* 212 | console.log(text.length, scriptData.length, text.length - scriptData.length); 213 | */ 214 | }; 215 | updateUI(); 216 | setInterval(updateUI, 1000); 217 | 218 | /* 219 | console.log(editor.display.renderedView[0].measure.map); 220 | */ 221 | 222 | Lib.registerShowTypesCallback(function(unresolvedNodes) { 223 | storedUnresolvedNodes = unresolvedNodes; 224 | /* 225 | for (var index in unresolvedNodes) { 226 | var node = unresolvedNodes[node]; 227 | } 228 | */ 229 | }); 230 | 231 | if (/HeadlessChrome/.test(window.navigator.userAgent)) { 232 | console.log("Chrome headless detected. Expecting transpile to be called manually."); 233 | } else { 234 | transpile(); 235 | } 236 | }; 237 | /* 238 | $.get(scriptSource, onLoad, "text"); 239 | */ 240 | onLoad(scriptData); 241 | }); 242 | 243 | window.compile = Lib.compile; 244 | -------------------------------------------------------------------------------- /src/listNodes.js: -------------------------------------------------------------------------------- 1 | var esprima = require('esprima'); 2 | 3 | var escodegen = require('escodegen'); 4 | 5 | var Lib = require('./lib.js'); 6 | 7 | var fs = require('fs'); 8 | 9 | var data = fs.readFileSync(process.argv[2], 'utf8'); 10 | 11 | var syntax = 12 | esprima.parse( 13 | data, 14 | { raw: true, tokens: true, range: true, comment: true }); 15 | syntax = escodegen.attachComments(syntax, syntax.comments, syntax.tokens); 16 | 17 | var nodeTypes = {}; 18 | var nodeTypesList = []; 19 | 20 | var postProcess = function(code, parentNode, node) { 21 | if (node !== null && node !== undefined && node.hasOwnProperty('type')) { 22 | if (!(node.type in nodeTypes)) { 23 | nodeTypes[node.type] = true; 24 | nodeTypesList.push(node.type); 25 | } 26 | /* 27 | if (node.type === 'SequenceExpression') { 28 | console.log(Lib.getCode(code, node)); 29 | } 30 | */ 31 | } 32 | return node; 33 | } 34 | 35 | Lib.walk(data, null, syntax, postProcess); 36 | 37 | nodeTypesList.sort(); 38 | for (var i = 0; i < nodeTypesList.length; i++) { 39 | var nodeType = nodeTypesList[i]; 40 | console.log(nodeType); 41 | } 42 | -------------------------------------------------------------------------------- /src/node.js: -------------------------------------------------------------------------------- 1 | import scriptData from './example-node.txt'; 2 | var Lib = require('./lib.js'); 3 | 4 | var fs = require('fs'); 5 | 6 | var evalTimeout = 2000; 7 | 8 | var scriptData = fs.readFileSync('./src/example-node.txt', 'utf-8'); 9 | 10 | (async () => { 11 | var compiled = await Lib.compile(scriptData, evalTimeout); 12 | 13 | var outFileName = './src/TestNode.re'; 14 | console.log('Writing ' + outFileName); 15 | fs.writeFileSync(outFileName, compiled); 16 | })(); 17 | -------------------------------------------------------------------------------- /src/puppet.js: -------------------------------------------------------------------------------- 1 | const puppeteer = require('puppeteer'); 2 | 3 | const fs = require('fs'); 4 | 5 | function timeout(ms) { 6 | return new Promise(resolve => setTimeout(resolve, ms)); 7 | }; 8 | 9 | (async () => { 10 | const browser = await puppeteer.launch(); 11 | const page = await browser.newPage(); 12 | /* 13 | page.on('console', msg => { 14 | for (let i = 0; i < msg.args().length; ++i) { 15 | console.error(`${i}: ${msg.args()[i]}`); 16 | } 17 | }); 18 | */ 19 | await page.goto('http://localhost:8080/index.html', {"waitUntil" : "networkidle0"} ); 20 | const source = fs.readFileSync(process.argv[2], 'utf8'); 21 | /* 22 | var result = await page.evaluate((source) => Promise.resolve(compile(source)), source); 23 | */ 24 | var result = await page.evaluate((source) => compile(source, 10000), source); 25 | console.log(result); 26 | /* 27 | await page.screenshot({path: 'example.png', fullPage: true}); 28 | */ 29 | 30 | await browser.close(); 31 | })(); 32 | -------------------------------------------------------------------------------- /src/runtests.js: -------------------------------------------------------------------------------- 1 | var myRoot = require('window-or-global'); 2 | 3 | var Lib = require('./lib.js'); 4 | 5 | var fs = require('fs'); 6 | 7 | var path = require('path'); 8 | 9 | var cp = require('child_process'); 10 | 11 | var evalTimeout = 0; 12 | 13 | var tests = Lib.tests; 14 | 15 | var myDir = path.resolve('.'); 16 | var dirName = path.resolve('./rebuild'); 17 | var srcDirName = dirName + '/src'; 18 | 19 | (async () => { 20 | var bsb = path.resolve('./node_modules/.bin/bsb'); 21 | if (!fs.existsSync(dirName)) { 22 | cp.execSync(bsb + ' -init rebuild -theme basic-reason', { cwd: myDir }); 23 | } 24 | var i = 0; 25 | for (var name in tests) { 26 | i += 1; 27 | var value = tests[name]; 28 | var program = value.program; 29 | var compiled; 30 | try { 31 | var logs = []; 32 | myRoot.fakeConsole = { 33 | log: function(obj) { 34 | logs.push(obj); 35 | } 36 | }; 37 | compiled = await Lib.compile(program, evalTimeout); 38 | // Call compileAST once for code coverage 39 | if (i == 1) { 40 | var compiledAST = Lib.compileAST(program); 41 | } 42 | } catch(error) { 43 | console.log("Test failed transpile: ", name); 44 | console.log(error.stack.toString()); 45 | /* 46 | var ast = Lib.compileAST(program); 47 | console.log(ast); 48 | */ 49 | continue; 50 | } 51 | var tempFileName = srcDirName + '/Temp' + i + '.re'; 52 | var jsOutFileName = srcDirName + '/Temp' + i + '.bs.js'; 53 | var cleanup = function() { 54 | try { 55 | fs.unlinkSync(tempFileName); 56 | } catch (error) { 57 | } 58 | }; 59 | fs.writeFileSync(tempFileName, compiled); 60 | var js; 61 | try { 62 | /* 63 | var js = await bsb.compileFileSync('js', tempFileName); 64 | */ 65 | try { 66 | fs.unlinkSync(jsOutFileName); 67 | } catch (error) { 68 | } 69 | cp.execSync( 70 | bsb, { 71 | cwd: dirName 72 | }); 73 | js = fs.readFileSync(jsOutFileName, 'utf-8'); 74 | } catch (error) { 75 | cleanup(); 76 | console.log("Test failed ReasonML compile: ", name); 77 | console.log(compiled); 78 | console.log(error.stdout.toString('utf-8')); 79 | console.log(error.stack.toString()); 80 | continue; 81 | /* 82 | console.log(error.stack.toString()); 83 | */ 84 | } 85 | cleanup(); 86 | var logs = []; 87 | myRoot.fakeConsole = { 88 | log: function(obj) { 89 | logs.push(obj); 90 | } 91 | }; 92 | try { 93 | eval(js); 94 | } catch(error) { 95 | console.log("Test failed eval: ", name); 96 | console.log(compiled); 97 | console.log(js); 98 | console.log(error.stack.toString()); 99 | continue; 100 | } 101 | if (JSON.stringify(logs) != JSON.stringify(value.out)) { 102 | console.log("Test failed compare: ", name); 103 | console.log("Found: ", logs, ", expected: ", value.out); 104 | console.log(compiled); 105 | console.log(js); 106 | continue; 107 | } 108 | console.log("Test succeeded: ", name); 109 | } 110 | })(); 111 | -------------------------------------------------------------------------------- /src/transpileExamples.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | i=0 3 | for file in examples/pixiBasics/*.js; do 4 | i=$(($i + 1)) 5 | is=$(printf "%03d" $i) 6 | echo "Writing src/Example$is.re" 7 | node src/puppet.js $file > src/Example${is}.re 8 | done 9 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | var serverConfig = { 4 | target: 'node', 5 | entry: { 6 | node: './src/node.js', 7 | }, 8 | output: { 9 | path: path.resolve(__dirname, 'dist'), 10 | filename: '[name].js' 11 | }, 12 | plugins: [], 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.css$/, 17 | use: [ 'style-loader', 'css-loader' ] 18 | }, 19 | { 20 | test: /\.txt$/, 21 | use: 'raw-loader' 22 | } 23 | ] 24 | } 25 | }; 26 | 27 | var clientConfig = { 28 | target: 'web', 29 | entry: { 30 | index: './src/index.js', 31 | test: './src/Test.bs.js', 32 | }, 33 | output: { 34 | path: path.resolve(__dirname, 'dist'), 35 | filename: '[name].js' 36 | }, 37 | devServer: { 38 | index: 'default.html', 39 | contentBase: path.join(__dirname, "."), 40 | compress: true, 41 | port: 8080 42 | }, 43 | plugins: [], 44 | module: { 45 | rules: [ 46 | { 47 | test: /\.css$/, 48 | use: [ 'style-loader', 'css-loader' ] 49 | }, 50 | { 51 | test: /\.txt$/, 52 | use: 'raw-loader' 53 | } 54 | ] 55 | } 56 | }; 57 | 58 | module.exports = [ serverConfig, clientConfig ]; 59 | --------------------------------------------------------------------------------