When using the Jasmine Rubygem, I find it extremely annoying that I have to conform to the generated directory structure which has a javascripts subfolder within the spec folder. I find it useless since I'm writing entirely in Javascript.
I find I can change this within the public folder by changing the generated jasmine.yml, however, this is not what I wanted since I still have to keep the javascripts folder with me.
Is there any way of customizing this folder structure?
Here's how I did this with jasmine gem 1.0.2.1:
1) Customize the jasmine_config.rb file to override the simple_config_file method to point to the correct yml file path. This file is initially generated at spec/javascripts/support/jasmine_config.rb. As seen on the github source (https://github.com/pivotal/jasmine-gem/blob/v1.0.2.1/lib/jasmine/config.rb), the method is hardcoded to use:
def simple_config_file
File.join(project_root, 'spec/javascripts/support/jasmine.yml')
end
I wanted to rename my 'spec' directory to 'test' so the top of my jasmine_config.rb file looks like this:
module Jasmine
class Config
def simple_config_file
File.join(project_root, 'test/javascripts/support/jasmine.yml')
end
end
end
2) Force rake to load the config file. I did this by adding the line:
require 'test/javascripts/support/jasmine_config.rb'
immediately after requiring jasmine in my Rakefile.
3) Update jasmine.yml (also in the support folder) to indicate where your javascript test files live. My yml file now ends with this:
# EXAMPLE:
#
# spec_dir: spec/javascripts
#
spec_dir: test/javascripts
Of course, you need to adjust that path "test" to be what you want.
I think this approach should work with the latest version of the gem, but this approach will break in the future if they change the interface of that Config class.
As of 2021, here's how to change the folder name when using the jasmine-browser-runner with NodeJS.
Install jasmine and setup the project:
npm install --save-dev jasmine-browser-runner jasmine-core
npx jasmine-browser-runner init
Rename the spec folder to test and edit jasmine-browser.json:
"specDir": "test"
Run the tests with this command:
npx jasmine-browser-runner runSpecs --config=test/support/jasmine-browser.json
Related
I'm trying to import the javascript from a gem's folder with Rails 6 webpacker. I've seen this only done with 1 file per import. Is it possible to grab all files with *.js extensions for a gem?
javascript/packs/application.js.erb
import "<%= File.read(File.join(Gem.loaded_specs['active_storage_drag_and_drop'].full_gem_path, 'lib', 'assets', 'javascripts', 'active_storage_drag_and_drop/*.js')) %>";
Error
(erb):17:in `read': No such file or directory # rb_sysopen -/home/user.../active_storage_drag_and_drop../assets/javascript/active_storage_drag_and_drop/index.js
This package is available on NPM: https://www.npmjs.com/package/active_storage_drag_and_drop
I would instead do this:
yarn add active_storage_drag_and_drop
Then in your Webpack js file:
import * as ActiveStorageDragAndDrop from "active_storage_drag_and_drop"
window.ActiveStorageDragAndDrop = ActiveStorageDragAndDrop // needed as of v1.0.3
https://github.com/rossta/rails6-webpacker-demo/commit/ce1e8eb991b681574bdb7ce0ef33ae4e34b61dfd#diff-c0a98e77a42efd669302853444d5c362
I've created a working demo in a branch at https://github.com/rossta/rails6-webpacker-demo/tree/example/active_storage_drag_and_drop
Because the package's JS source makes assumptions about globals as of v1.0.3, assigning the imported var in your project JS appears
to be necessary until the package is updated.
You may still need the gem in your Gemfile for the Ruby-based dependencies.
Generally, I would not recommend trying to look up javascript dependencies provided by Ruby gems via the gem path in ERB. One of the advantages of moving to Webpack/Webpacker is that you should try to leverage NPM for your dependencies where possible.
I am working on a project which is used typescript, vue and webpack together. I have created some components and i can use them by importing. However i have different js files in another root folder like site.js, ruler.js, color.js, speech.js, drware.js and etc. Schema is like below
+|dist
----build.js
+|src
----index.ts
+|main
----Header.vue
----Footer.vue
----Body.vue
+|lib
----site.js
----ruler.js
----drawer.js
----color.js
webpack config is getting index.ts from src folder which is shown above. When I don't use some functions (like jquery plugins or some special funciton) everything is fine. But when i use a functon from site.js webpack fives error like cannot resolve "ruler" from site.js
I have tried to concat by giving second entry in webpack.config.js but it didn' solve my problem. I wonder how to to resolve external js files in vue or ts files using webpack. I alson tried
require(""../src/site.js)
but it didn't work too.
Edit : If i concat the js files manually and give it as script source on html it works without problem but i cannot merge all files like or i don't want to use "gulp" to concat them
Have you tried including a script-loader into your webpack's configuration?
Webpack is a bundler, not a script loader itself. I would recommend you to follow webpack's official instructions to add a script loader.
Good luck!
So, I would like to have a simple chart in web page (with websockets), but it must be available offline.
First thing I did, I've downloaded empty project, then npm install total.js, then npm install n3-charts. Now I need to specify path to local file and here I bumped into two questions:
1) Can I have "index.html" with headers of its own, or all must be put inside "layout.html" (will they combine)? How would index.htm then look like?
2) Wherever I put, path seems to not to work because (I guess) path is wrong. I've tried <script src="node_modules/angular/angular.min.js"> and to place that to layout.htm, but no success.
UPDATE: there is a folder "public/js" where you can put js files, but that would imply that node_modules folder is just not to be used and that all of the files you need are to be copied to "public/js". Is this the way it was intended?
sorry for delay.
you can use section, documentation
of course, you have to create another node_modules directory in public folder: /app/public/node_modules/angular/angular.min.js and then it will work.
YOUR UPDATE: you can rename it as you wish
I am trying to inject bower files into my jade/html using wiredep. The issue is twofold.
If I were to keep the bower_component in the root folder. Being that my server is set up from ./dist and not from root, I am unable to reach bower_compoents
If I were to install bower-components in my ./dist folder(which makes sense, as of now), and create a unique filepath for bower_components, my bower.json(it needs this to pick up proper filepath also), then it adds the extra filepath ./dist to my bower_components. However, being that my server is in ./dist, I need to remove ./dist from my filepath.
I will be answering this one for option #2. I just want to put it out there for others who want to do the same or something similar.
In the future I do want to keep bower_components in my root in order to compile them all into one js file. For now this works, as it is mostly for prototyping reasons. However, definitely interested in finding a way to make #1 work.
I set up a branch in the github here for those interested in seeing the file structure and the full gulpfile.js
What I ended up doing is installing all of the bower_components in my dist folder. I also put my bower.json there.
For the wiredep and jade magic I added the following to my gulpfile.js:
gulp.task('templates', function() {
var YOUR_LOCALS = {};
gulp.src('./app/jade/*.jade')
.pipe(jade({
locals: YOUR_LOCALS,
pretty: true
}))
.pipe(wiredep({
directory: './dist/bower_components',
bowerJson: require('./dist/bower.json'),
ignorePath: '/dist'
}))
.pipe(gulp.dest('./dist'))
});
The magic happens in one real place and that is the ignorePath option for wiredep. I am able to have the directory from the dist folder. However, being that the filepath includes ./dist, and I can't have that being that my server works from ./dist, I was able to ignore ./dist and it outputted the proper file path.
Another note, in order to includes, let's say javascript files in bower for jade, use the following syntax
// bower:js
// endbower
That's it and if this only helped one person there, it was worth it. If you have any questions feel free to leave a comment.
When I init a react-native project, index.ios.js is created as project entry file.
Can I change this file's name and if so, how?
When you start a react-native app you'll see this message output by the React Packager:
Running packager on port 8081
and then:
Looking for JS files in
/Users/gbirman/gil/mapily
React packager ready.
By this point, the packager has compiled your JS files and is serving them with the .js extension renamed to .bundle. For example, your index.io.js file is compiled and served from:
http://localhost:8081/index.ios.bundle
If you added another file foo.js in the same directory as index.ios.js, the packager would serve it from:
http://localhost:8081/foo.bundle
You can confirm this by opening that url in your browser.
Now to answer your question, your project has an iOS/AppDelegate.m file with the following line:
jsCodeLocation = [NSURL URLWithString:#"http://localhost:8081/index.ios.bundle"];
... as you can see, it loads the index.ios.bundle. You can change the path/filename there to whatever you want, but it's probably best to stick with the recommended approach of naming your entry file index.io.js
Suppose you've moved your index.ios.js into a folder called dist. You need to do two things
For your development environment: Update jsBundleURLForBundleRoot in AppDelegate.m to match your updated path.
For your release bundle: Open your Xcode project. You'll need to update the Bundle React Native code and images task under Build Phases for your project. Update the shell script in this section to look like below:
export NODE_BINARY=node
../node_modules/react-native/packager/react-native-xcode.sh dist/index.ios.js
react-native-xcode.sh accepts the ENTRY_FILE as an optional first argument, defaulting to index.ios.js if none is found.
Updated Build Phases Example
Reference - react-native/scripts/react-native-xcode.sh