Develop Reference

Importing iOS module from pod to nativescript plugin

Currently I have ventured into the world of development with NativeScript and a bit with Typescript, but now I have a problem that has been bothering me a lot.
I'm developing a plugin with the help of 'nativescript-plugin-seed' which makes use of a pod (AudioKit) for audio conversion. My question is the way I should import the 'AudioKit' module to the plugin in order to make use of its functions and then make use of them in an application
I include the code in Swift for the audio conversion that I tested in a Xcode project to verify its correct operation and the template where I suppose the module should be imported to generate the methods that will be communicated with my application.
Swift Code
import UIKit
import AudioKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let fileManager = FileManager.default
do {
let origin = Bundle.main.url(forResource: "IOS", withExtension: "mp4")
let documentDirectory = try fileManager.url(for: .documentDirectory, in: .userDomainMask, appropriateFor:nil, create:false)
let destination = documentDirectory.appendingPathComponent("test.wav")
var options = AKConverter.Options();
options.format = "wav";
options.sampleRate = 48000;
options.bitDepth = 16;
let converter = AKConverter(inputURL: origin!, outputURL: destination, options: options)
converter.start(completionHandler: { error in
if(error != nil){
print("ERROR")
}else{
print("CORRECT")
}
})
}
catch {
print(error)
}
}
}
Plugin Code (my-plugin.ios.ts)
import { Common } from './audio-converter.common';
//I suppose the module should be declared here
export class AudioConverter extends Common {
// and used here
}
**EDITED
I already use the commands HERE but the typing files are never created. In the same way I read If the pod was written in Swift I have to configure the pod file and the build.xcconfig, however it doesn’t work anyway. I'll comment the steps I'm doing just to verify that I’m not doing something wrong.
Create the plugin with git clone
https://github.com/NativeScript/nativescript-plugin-seed and configuring the plugin's name.....
Add the podfile
pod 'AudioKit', '~> 4.0'
post_install do |installer|
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
config.build_settings['SWIFT_SWIFT3_OBJC_INFERENCE'] = 'On'
config.build_settings['SWIFT_VERSION'] = '4.0'
end
end
end
Add to build.xcconfig the flag ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES
Executing these commands for create the typing files in /src (-EDITED For create the typing files these commands must used in /demo)
TNS_DEBUG_METADATA_PATH="$(pwd)/metadata" tns build ios [--for-device] [--release]
TNS_TYPESCRIPT_DECLARATIONS_PATH="$(pwd)/typings" tns build ios [--for-device] [--release]
In this point I supose that I have to get the files in typing carpet but I don't get them

Once you have the POD setup, all the Objective C exposed apis from the library will be available for you to access. If you like to utilise TypeScript Intellisense for the library, then you will have to generate the typings first.
Here you will find the docs on generating typings. Once it's generated you will have to import them in your reference.d.ts.
If you are not already familiar with marshalling Objective C to JS / TS, then you might want to start here.

Laravel javascript require perfect-scrollbar

I try to require the jquery pulgin perfect-scrollbar to my laravel javascript. So I have runed
npm install perfect-scrollbar
In Line 1 of my Javascript file (located under ressources/assets/javascript/material-dashboard/myfile.js) I require the plugin with this attempt
require('perfect-scrollbar');
The myscript.js is required to the app.js with require('./material-dashboard/myscript.js')
Now the browser console tell me
Uncaught TypeError: $(...).perfectScrollbar is not a function
The assets are compiled with
npm run dev
The content of myscript.js
require('perfect-scrollbar');
(function() {
isWindows = navigator.platform.indexOf('Win') > -1 ? true : false;
if (isWindows) {
// if we are on windows OS we activate the perfectScrollbar function
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
$('html').addClass('perfect-scrollbar-on');
} else {
$('html').addClass('perfect-scrollbar-off');
}
})();
What is wrong?
Thanks for your help!

Just to simplify your job, under bootstrap.js file that handles
require('perfect-scrollbar');
simply change it to
window.PerfectScrollbar = require('perfect-scrollbar').default; and you will be good to go. Only answers questions if using compiling assets in laravel with bootstrap.js

As per the docs, to initialise an element with the plugin you should do something like the following:
import PerfectScrollbar from 'perfect-scrollbar';
new PerfectScrollbar(".sidebar .sidebar-wrapper");
new PerfectScrollbar(".main-panel");
If you want to use require instead of import you would do something like:
let PerfectScrollbar = require('perfect-scrollbar').default;
Lastly, it doesn't look like the plugin is meant to work with jQuery out of the box, however, if you want to use with jQuery like you are in your post you could do the following:
import PerfectScrollbar from 'perfect-scrollbar';
$.fn.perfectScrollbar = function (options) {
return this.each((k, elm) => new PerfectScrollbar(elm, options || {}));
};
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();

Integrating React components with Pux - where does require() come from?

The Pux documentation tells me to use require() in the browser. Where does that function come from and how do I use it?
Background:
I'm trying to integrate the Quill editor with my web application that uses purescript-pux.
Following the Pux documentation I created a file MyEditor.js like this:
// module MyEditor
var React = require("react");
var Pux = require("purescript-pux");
var MyEditor = React.createClass({
displayName: "MyEditor",
onTextChange: function onTextChange(value) {
this.setState({ text: value });
},
render: function render() {
return React.createElement(ReactQuill, { value: this.state.text,
onChange: this.onTextChange });
}
});
exports.fromReact = Pux.fromReact(MyEditor);
and a file MyEditor.purs as follows:
module MyEditor where
import Pux.Html (Html, Attribute)
foreign import fromReact :: forall a. Array (Attribute a) -> Array (Html a) -> Html a
I then use MyEditor.fromReact [value p.description] in my Html Action and the code compiles, but the browser complains about ReferenceError: require is not defined.
I'm not very familiar with the javascript ecosystem. I'm aware that several libraries providing a require() function exist, but which one do I use with Pux and how?

require is the NodeJS way of importing modules, it's not supported in the browser so you'll need to run your project through a bundler like browserify or webpack to produce a bundle that the browser can understand.
If you are using the pulp build tool it's as simple as running
pulp browserify --to app.js
and then loading app.js in your html through a script tag.
pulp browserify documentation: https://github.com/bodil/pulp#commonjs-aware-builds

In addition to Christophs answer (but can't comment since comments don't allow code blocks):
Using Thermite 4.1.1 this worked for me:
add a package.json file with:
{
"dependencies": {
"react": "^0.14",
"react-dom": "^0.14"
}
}
run npm install
from then on pulp browserify --optimise gets the whole shebang packaged.
This is really badly documented and I opened an issue about that on purescript-react.

How to create QUnit tests with reference to another class?

I'm trying to add unit testing for JavaScript into my web site. I use VS2013 and my project is an ASP.NET web site.
Based on recommendations (http://www.rhyous.com/2013/02/20/creating-a-qunit-test-project-in-visual-studio-2010/) I've done so far:
Created new ASP.NET app
Imported QUnit (using NuGet)
Into "Scripts" added links to js-file in my original web site (files PlayerSkill.js - containts PlayerSkill class and trainings.js - contains Trainer and some other classes)
Created new folder "TestScripts"
Added TrainingTests.js file
Wrote simple test:
test( "Trainer should have non-empty group", function () {
var group = "group";
var trainer = new Trainer(123, "Name123", group, 123);
EQUAL(trainer.getTrainerGroup(), group);
});
Notice: my trainings.js file among others contains
function Trainer(id, name, group, level) {
...
var _group = group;
this.getTrainerGroup = function () { return _group ; }
};
When I execute my test I see error: Trainer is not defined.
It looks like reference to my class is not recognized. I feel like linking file is not enough, but what did I miss?
Please help add reference to the original file with class and run unit test.
Thank you.
P.S. Question 2: Can I add reference to 2 files (my unit test will require one more class which is in another file)? How?

You should add all the relevant logic of your application to your unit testing file so they all execute before you run your tests
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Test Results</title>
<link rel="stylesheet" href="/Content/qunit.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="/Scripts/qunit.js"></script>
<script src="/Scripts/PlayerSkill.js"></script>
<script src="/Scripts/trainings.js"></script>
<script src="/TestScripts/TrainingTests.js"></script>
</body>
</html>
You should not use linked files because they will not exist physically in the script folder.
If you really want to use them you should let the Visual Studio intellisense resolve the physical path of the file like this.
Type the script tag <script src=""></script>
Place the cursor inside the quotes in the src attribute and press CTRL + SPACE
Search your files and let the resolved path untouched
If your project location changes you must update the linked files and also the script references.
{Edit1}
Solution 2:
You could also use an MVC Controller and a Razor View to create your unit testing page and the linked files will work as expected with the only issue that you will have an extra controller in your project but this is not bad at all if for example you want to test the loading of content using ajax that is by default blocked by the browser if they are run from a local file.
Solution 3:
You can also setup a new MVC project just for your javascript unit testing just as you usually setup a new project for any server side code and this will help to prevent your testing to interfere with your production code
{Edit 2}
Solution 4:
As part of the javascript ecosystem you could use grunt or gulp to automate the copy of your scripts from anywhere to your project before running the tests. You could write a gulpfile.js like this
var sourcefiles = [/*you project file paths*/];
gulp.task('default', function () {
return gulp.src(sourcefiles).pipe(gulp.dest('Scripts'));
});
And then run it opening a console and running the command gulp or gulp default

Looks like trainings.js is not defined when calling TrainingTests.js . See this question for more details regarding why this happens! Once that is fixed it does work. And yes similar to trainings.js you can have any number of files in any folder as long as you reference them properly. I have created a sample fiddle accessible # http://plnkr.co/edit/PnqVebOzmPpGu7x2qWLs?p=preview
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="http://code.jquery.com/qunit/qunit-1.18.0.js"></script>
<script src="trainings.js"></script>
<script src="TrainingTests.js"></script>
</body>

In my case I wanted to run my tests from within my ASP.NET web application, and also on a CI server. In addition to the other information here I needed the following, otherwise I experienced the same error as the OP on my CI server:
Add one or more require() calls to test scripts.
Set the NODE_PATH environment variable to the root of my application.
Example of require()
Within my test scripts I include a requires block, the conditional allows me to use this script from a web browser without needing to adopt a third-party equivalent such as requirejs (which is convenient.)
if (typeof(require) !== 'undefined') {
require('lib/3rdparty/dist/3p.js');
require('js/my.js');
require('js/app.js');
}
Example of setting NODE_PATH
Below, 'wwwroot' is the path of where /lib/ and other application files are located. My test files are located within /tests/.
Using bash
#!/bin/bash
cd 'wwwroot'
export NODE_PATH=`pwd`
qunit tests
Using powershell
#!/usr/bin/pwsh
cd 'wwwroot'
$env:NODE_PATH=(pwd)
qunit tests
This allowed me to run tests both within my ASP.NET web application, and also from a CI server using a script.
HTH.

If you're wondering how to make your tests see your code when running from command line (not from browser!), here is a bit expanded version of Shaun Wilson's answer (which doesn't work out-of-the-box, but contains a good idea where to start)
Having following structure:
project
│ index.js <--- Your script with logic
└───test
tests.html <--- QUnit tests included in standard HTML page for "running" locally
tests.js <--- QUnit test code
And let's imagine that in your index.js you have following:
function doSomething(arg) {
// do smth
return arg;
}
And the test code in tests.js (not that it can be the whole content of the file - you don't need anything else to work):
QUnit.test( "test something", function( assert ) {
assert.ok(doSomething(true));
});
Running from command line
To make your code accessible from the tests you need to add two things to the scripts.
First is to explicitly "import" your script from tests. Since JS doesn't have sunch a functionality out-of-the box, we'll need to use require coming from NPM. And to keep our tests working from HTML (when you run it from browser, require is undefined) add simple check:
// Add this in the beginning of tests.js
// Use "require" only if run from command line
if (typeof(require) !== 'undefined') {
// It's important to define it with the very same name in order to have both browser and CLI runs working with the same test code
doSomething = require('../index.js').doSomething;
}
But if index.js does not expose anything, nothing will be accessible. So it's required to expose functions you want to test explicitly (read more about exports). Add this to index.js:
//This goes to the very bottom of index.js
if (typeof module !== 'undefined' && module.exports) {
exports.doSomething = doSomething;
}
When it's done, just type
qunit
And the output should be like
TAP version 13
ok 1 Testing index.js > returnTrue returns true
1..1
# pass 1
# skip 0
# todo 0
# fail 0

Well, due to help of two answers I did localize that problem indeed was in inability of VS to copy needed file into test project.
This can be probably resolved by multiple ways, I found one, idea copied from: http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
Solution is simple: add tag dynamically
In order to achieve this, I've added the following code into tag:
<script>
var fileref = document.createElement('script');
fileref.setAttribute("type", "text/javascript");
var path = 'path'; // here is an absolute address to JS-file on my web site
fileref.setAttribute("src", path);
document.getElementsByTagName("head")[0].appendChild(fileref);
loadjscssfile(, "js") //dynamically load and add this .js file
</script>
And moved my tests into (required also reference to jquery before)
$(document).ready(function () {
QUnit.test("Test #1 description", function () { ... });
});
Similar approach also works for pure test files.

How can I access localstorage using typescript?

module Layout {
var a = localStorage.getItem('x');
export class aaa {
init() {;
var xxx = localStorage.getItem('x');
}
}
}
In Visual Studio 2012 with the 0.8.1 version I am getting a message on the line inside the init() function saying "the name localStorage does not exist in the current scope". outside of the aaa class this works fine. Is there something I can do to solve this problem?

The 0.8.1 version of TypeScript has caused a bug in Web Essentials. There should be a fix in a few days.
In the meantime, if you install the 0.8.0 version of TypeScript that works with the current version, or you can compile from command line:
tsc --debug c:\myapp\app.ts