For example (even trying to use the library from console after X seconds or with a setTimeout):
client/kiwi.mini.js (from https://github.com/gamelab/kiwi.js)
Exception from Tracker afterFlush function:
debug.js:41 ReferenceError: Kiwi is not defined
When kiwi is loaded standalone with
<script src
within a normal HTML page, it just works (new Kiwi...)
The last little bit of the huge unminified JS file is minified, so it's hard to tell for sure, but it doesn't look like Kiwi is being added to the window object in their code. Since Meteor compiles all JS files and makes any variable that has a var in front of it local to that JS file, the Kiwi object is not available globally.
Simply add one line of code to the end of the minified file:
window.Kiwi = Kiwi;
I've tested it in a sample Meteor app and was able to create a new Kiwi.Game object.
Related
I just started experimenting with Nativescript and am using the Playground to test things and see how it works.
What I wanted to do: add the moment.js module for formatting date/time
What I tried:
1. added the moment package. This appears to have worked because Playground now shows the moment folder along with files (package.json, ender.js, moment.js, etc) and subfolders.
2. In my code I used this snippet to require "moment"
var Moment = require("moment");
This failed though because I get an error of
Error: Could not find module 'moment'. Computed path '/var/mobile/Containers/Data/Application/xxxx/Documents/Playground/LiveSync/app/tns_modules/moment'
Any suggestions on what I need to change to get it to find 'moment'? I checked in package.json and it has the name as "moment".
The default require statement will search for the module form the tns_modules directory that was packed with the app during build time. So with Playground you could use relative path.
For example, if you want to use it on app.js which is in the root level,
var Moment = require('./moment');
You know, I spend more time just trying to get things set up to work with Angular than I do actually developing with Angular. There must be an easier way... :(
Currently, I am using the aspnetcore-spa template, creating a project with the command "dotnet new angular" - this is version 1.0.3, which adds Angular 4.1.2 to the npm dependencies. This works great to get a project running quickly. But now I want to add PrimeNG to take advantage of their form controls. I have been struggling with this all day, and would love it if anyone could provide some assistance.
Here is what I have done in my current effort (the latest of many, starting fresh each time):
1) Added to the package.json file: "primeng": "4.1.0-rc.2"
2) Added 'primeng/primeng' to the webpack.config.vendor.js file's vendor collection.
3) Added the following to my test module (which is in turn referenced in app.module.shared.ts so I can route to it via my RouterModule):
import { FileUploadModule } from 'primeng/components/fileupload/fileupload';
And in the html for the module, in an attempt to use the file uploader control, I have (from their site - https://www.primefaces.org/primeng/#/fileupload):
<p-fileUpload name="myfile[]" url="./upload.php"></p-fileUpload>
4) ran "webpack --config webpack.config.vendor.js" from a command prompt at the root of the project folder, which completed with no errors.
Then I hit F5 to run the project, and I got this error:
Exception: Call to Node module failed with error: Error: Template parse errors:
'p-fileUpload' is not a known element:
1. If 'p-fileUpload' is an Angular component, then verify that it is part of this module.
2. If 'p-fileUpload' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. (" type="button" (click)="onclick()" class="ui-button-info" label="Click Me">Click Me</button>-->
So, in an effort to comply, I added a reference to the ngprime module to the app.module.shared.ts file, like this (I don't really know how I should reference the module...):
import { FileUploadModule } from 'primeng/primeng';
But got the same exact error.
What am I missing???
Any help would be most appreciated.
I finally have this working, using the asp-prerender-module to get server-side rendering, and not having to rely on the asp-ng2-prerender-module (see my last comment). The trick, I found, was to reference the FileUploaderModule in the app.module.shared.ts file like this:
import { FileUploadModule } from 'primeng/components/fileupload/fileupload';
rather than like this:
import { FileUploadModule } from 'primeng/primeng';
The reason this matters is that the latter method of referencing will load all other components as well (see explanation here: https://www.primefaces.org/primeng/#/setup), and SOME of the PrimeNG components can not be rendered on the server due to DOM-related references (things like "window", which do not exist on the server). See the discussion here for more on this: https://github.com/primefaces/primeng/issues/1341
This change, combined with the other steps listed in my answer and, of course, actually referencing the directive in app.module (thank you #pankaj !) made everything work correctly at last. Only took me about 7 hours to figure it out. :(
I'm trying to take advantage of Google Closure Compiler minification by writing a database script of my own and compiling it with the pre-compiled ydn. To get a basic first version working I'm trying to rewrite the todo list demo from the project. Unfortunately, I don't understand how to keep namespaces for ydn functions preserved in the compiled output file.
Here's what I've written so far: http://pastebin.com/6YhnRuD5
When the code compiles in advanced mode, the "ydn.db.Storage" from "db = new ydn.db.Storage(dbName, Schema)" gets munged into "ydn.db.c$" making it unusable. The goog.exportSymbol at the bottom of the file doesn't seem to save the function names either.
Does anyone know how to rewrite this with Google Closure Compiler? Should this be compiled directly with the ydn source code instead?
The goog.exportSymbol at the bottom of the file doesn't seem to save the function names either.
It should.
goog.exportSymbol("ydn.db.Storage");
should be
goog.exportSymbol('ydn.db.Storage', ydn.db.Storage);
I am trying to use Google Closure templates (Soy) with Google Closure.
I am including the soyutils_usegoog.js utilities file as instructed. This file provides a number of utilities used by the generated templates, notably soy.StringBuilder. Here's how it is creating it:
soy.StringBuilder = goog.string.StringBuffer;
The soyutils file requires goog.string.StringBuffer a few lines above, but when running in non-compiled mode this results in a runtime error because the JS file that StringBuffer resides in will not be loaded until after soyutils has executed.
Unless I am mistaken, JS files in Closure should not immediately access namespaces that they 'require'. The <script> tag is only added after the execution of the current script (in non-compiled mode) so immediate usage will result in a runtime error.
In short, how can I load in soyutils_usegoog.js without triggering a runtime error due to the early access of good.string.StringBuffer.
Are you recreating deps.js with your compiled templates as an input (and soyutils_usegoog.js)? And then are you goog.require-ing your template? Something like this should work:
<script src="/closure-library/closure/goog/base.js"></script>
<script src="/closure-library/closure/goog/deps.js"></script><!-- might not need this line if base.js is setup to auto include deps.js -->
<script>
goog.require('your.template');//this will pull in and execute all the dependencies (including StringBuffer) for your template
</script>
<script>
alert(your.template());
</script>
Perhaps the question has been asked on http://groups.google.com/group/closure-templates-discuss?
I'm trying to do a very simple app in Flash/Flex, that loads an image embedded in the swf itself and then shows it. The thing is I'm trying to do it using the command line only (mxmlc and compc) and without using #Embed, and failing miserably.
I have a very simple Main.as :
package
{
import flash.display.*;
import flash.utils.*;
public class Main extends Sprite
{
public function Main () : void
{
var pDef:Class = getDefinitionByName("icon_big.png") as Class;
var _image:BitmapData = new pDef(0, 0);
var pSprite:Sprite = new Sprite();
pSprite.graphics.beginBitmapFill(_image);
pSprite.graphics.drawRect(0, 0, _image.width, _image.height);
pSprite.graphics.endFill();
addChild(pSprite);
}
}
}
This works fine if I add icon_big.png to the Library using the Flash IDE, but I can't figure out how to do it from the command line.
I'm using compc to put the png inside a swc :
compc --include-file icon_big.png icon_big.png -output assets.swc
This generates a 17 kb assets.swf, slightly bigger than icon_big.png. Then I try to compile and link Main.as :
mxmlc -include-libraries+=assets.swc Main.as
This produces a 944 byte Main.swf, which clearly doesn't include the asset, and fails at runtime.
According to the mxmlc docs I found, -include-libraries should link with every class, including the ones not directly referenced by code (as is the case here, since I'm getting the class from code), and it unsurprisingly fails at runtime.
Note that this same code (or, more precisely, quite equivalent code) works when used within a Flash project - I'm not looking to fix the code, but how to do in the command line whatever Flash does internally.
I feel I'm just "not getting" something... any clues?
I recommend you to download the swftools from swftools.org. Once you have them, run:
swfdump -D assets.swf
Take a look in particular at the output which relates to SWF tag with value 76 (0x4C), called SYMBOLCLASS.
Here is an example of an exported class, named IntegerMemberBySlot:
[04c] 24 SYMBOLCLASS
exports 0001 as "IntegerMemberBySlot"
What symbols are you exporting from your assets.swf?
Have you tried adding the path of the assets to your source path parameter when compiling with mxmlc?
-source-path ./PATH/TO/ASSET
I think you need to embed the PNGs in a class, then compile that class into a SWC. I don't think you can put the PNGs directly into a SWC like you are trying to, but I could be wrong.
I had a similar situation (large project, resource swc with graphic assets), and no matter what I tried, I could't get Flex to include assets and classes not directly referenced from the project (I wanted to include different skins, and then instantiate the proper one at runtime, depending on the configuration).
Finally, I found a workaround by instead of static swc liking, switching over to runtime shared libraries (RSLs). Basically, flex unbundles the swc, and loads and links the included swf in runtime, before running the application itself. All of the classes and assets in the swf are loaded this way. May not be exactly what you're after, but it works for me.