I've create a mode using http://ace.c9.io/tool/mode_creator.html
What is the process to build that into a useable file for an existing version of ace? It seems like maybe I have to pass that code through some sort of build step to get output such as https://github.com/ajaxorg/ace-builds/blob/master/src/mode-golang.js ...
I got it to work:
Checked out ace from github
Made bosun.js which contained some sort of loading boilerplate - I based on the d example. I then placed might highlight rules in bosun_highlight_rules.js.
Ran node ./Makefile.dryice.js -nc to build ace , and copied the resulting bosun.js (which has embedded various requirements) to my ace directory in my project. The built file ends up in /build/src-noconflict/mode-bosun.js.
bosun.js (pre build, in /lib/ace/mode of the repo:
define(function(require, exports, module) {
"use strict";
var oop = require("../lib/oop");
var TextMode = require("./text").Mode;
var BosunHighlightRules = require("./bosun_highlight_rules").BosunHighlightRules;
var Mode = function() {
this.HighlightRules = BosunHighlightRules;
};
oop.inherits(Mode, TextMode);
(function() {
this.$id = "ace/mode/bosun";
}).call(Mode.prototype);
exports.Mode = Mode;
});
bosun_highlight_rules.js (Also in /lib/ace/mode):
define(function(require, exports, module) {
"use strict";
var oop = require("../lib/oop");
var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;
var BosunHighlightRules = function() {
this.$rules = {
"start" : [
{....
};
oop.inherits(BosunHighlightRules, TextHighlightRules);
exports.BosunHighlightRules = BosunHighlightRules;
});
Related
I'm using this plugin for years now, and it's the first time I get this error.
I'm working on an old project which i recently upgraded to the latests versions of node & npm, so I'm working with node v16.15.0 and npm v8.5.5. I also upgraded all of my npm packages to their latests versions (yes, I like to live dangerously).
Gulp v4.0.2 with gulpfile.js as such (there is some commented code in it because I'm still in the process of making it work with these versions of node & npm. Originally, this project was running fine with node v12.6.0 and npm v7.20.03 .
After upgrading, I encountered many errors, as for example the need to switch from node-sass to dart-sass, because it's deprecated. ) :
// MODULES
// ----------------------------------------------------------------------------
const gulp = require('gulp'),
//sass = require('gulp-sass')(require('dart-sass'), require('node-sass')),
sass = require('gulp-sass')(require('sass'), require('dart-sass')),
globImporter = require('node-sass-glob-importer'),
postcss = require('gulp-postcss'),
stylelint = require('gulp-stylelint'),
svgstore = require('gulp-svgstore'),
rename = require('gulp-rename'),
cssnano = require('cssnano'),
uglifyjs = require('uglify-js'),
del = require('del'),
autoprefixer = require('autoprefixer'),
// This is based on node-sass, which is deprecated
// find a replacement which works with something else...
//inliner = require('sass-inline-svg'),
connect = require('gulp-connect'),
openBrowser = require('open');
// Basic config for paths (cfg = config)
// ----------------------------------------------------------------------------
const cfg = {
scssDir: 'src/scss/',
builtCssDir: 'dist/css/',
scssPattern: '**/*.scss',
svgDir: 'src/assets/svg/',
compiledSvgDir: 'dist/svg/',
compiledSvgFileName: 'symbols.twig',
svgPattern: '**/*.svg',
jsLibsDir: 'src/js/libs/',
jsDir: 'src/js/',
compiledJsLibsDir: 'dist/js/libs/',
compiledJsDir: 'dist/js/',
jsPattern: '*.js'
}
// Launch a server
// ----------------------------------------------------------------------------
function serve() {
connect.server({
port: 8080,
livereload: true,
root: ['src']
});
}
// Open application in browser
// ----------------------------------------------------------------------------
async function open() {
await openBrowser('http://localhost:8080/');
}
// Construct style.css (Combine all scss files into one css final file)
// ----------------------------------------------------------------------------
function style() {
return gulp
.src(cfg.scssDir+cfg.scssPattern)
// Test files with `gulp-stylelint` to ckeck the coding style
/*.pipe(stylelint({
reporters: [
{formatter: 'compact', console: true}
]
}))*/
/*.pipe(sass({
importer: globImporter(),
functions: {
svg: inliner(cfg.svgDir, {encodingFormat: 'uri'})
}
}))*/
.on('error', sass.logError)
// Use postcss with autoprefixer and compress the compiled file using cssnano
.pipe(postcss([autoprefixer(), cssnano()]))
.pipe(gulp.dest(cfg.builtCssDir))
}
// Construct svg symbol file (Combine svg files into one with <symbol> elements)
// ----------------------------------------------------------------------------
/*function svg() {
return gulp
.src(cfg.svgDir+cfg.svgPattern, {base: cfg.svgDir})
.pipe(rename((filePath) => {
const name = filePath.dirname !== '.' ? filePath.dirname.split(filePath.sep) : []
name.push(filePath.basename)
filePath.basename = `symbol-${name.join('-')}`
}))
.pipe(svgstore({ inlineSvg: true }))
.pipe(rename(cfg.compiledSvgFileName))
.pipe(gulp.dest(cfg.compiledSvgDir));
}*/
// Catch JS libs and transfer it to dist folder
// ----------------------------------------------------------------------------
async function jslibs() {
return gulp
.src(cfg.jsLibsDir+cfg.jsPattern)
.pipe(gulp.dest(cfg.compiledJsLibsDir));
}
// Compile JS
// ----------------------------------------------------------------------------
async function js() {
return gulp
.src(cfg.jsDir+cfg.jsPattern)
.pipe(gulp.dest(cfg.compiledJsDir));
}
// Watcher
// ----------------------------------------------------------------------------
function watch() {
gulp.watch('../'+cfg.scssDir+cfg.scssPattern, style)
gulp.watch('../'+cfg.scssDir+cfg.scssPattern)
gulp.watch(cfg.scssDir+cfg.scssPattern, style)
gulp.watch(cfg.svgDir+cfg.svgPattern, svg)
gulp.watch(cfg.scssDir+cfg.scssPattern);
}
// Empty the build folder of its front asset like css & svg (We're not emptying it totally, because there is other assets in it)
function clean() {
return del([
cfg.builtCssDir,
cfg.compiledSvgDir+'/'+cfg.compiledSvgFileName,
cfg.compiledJsDir
], {force: true});
}
clean.description = 'Delete the content of the build folder.';
// Serve
// ----------------------------------------------------------------------------
// Launch server
const launch = gulp.series(open, serve);
// Builder
// ----------------------------------------------------------------------------
// Regenerate the build folder.
const build = gulp.series(clean, style, jslibs, js);
// Export default task
// ----------------------------------------------------------------------------
// Regenerate the build folder & launch watcher
const defaultTask = gulp.series(clean, style, jslibs, js, watch);
// Export Tasks
// ----------------------------------------------------------------------------
module.exports = {
open,
serve,
launch,
clean,
style,
jslibs,
js,
build,
watch,
default: defaultTask
};
I get the following error when I try to throw my gulp default task in my terminal :
error
[11:42:55] CssSyntaxError in plugin "gulp-postcss"
Message:
/Users/emma/Desktop/www/photosbroth/src/scss/styles.scss:3:1: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser
1 | #charset "UTF-8";
2 |
> 3 | // Import EXTERNAL libs
| ^
4 | // - `sass-mq` for breakpoints management
5 | #import '../../node_modules/sass-mq/mq';
Apparently, it doesn't like the // scss comments, which were perfectly fine before I tried to upgrade my stack.
Could anyone help please ? I wasn't able to find a solution to this.
I tried this in the gulpfile :
postcss = require('gulp-postcss')(require('postcss'))
this
postcss = require('gulp-postcss')(require('postcss-scss'))
and this
postcss = require('gulp-postcss')(require('postcss'), require('postcss-scss'))
None of those expressions worked.
Is this a bug or anything else ? Am I missing something ?
Thank you.
Webpack has a resolve.mainFields configuration: https://webpack.js.org/configuration/resolve/#resolvemainfields
This allows control over what package.json field should be used as an entrypoint.
I have an app that pulls in dozens of different 3rd party packages. The use case is that I want to specify what field to use depending on the name of the package. Example:
For package foo use the main field in node_modules/foo/package.json
For package bar use the module field in node_modules/bar/package.json
Certain packages I'm relying on are not bundled in a correct manner, the code that the module field is pointing to does not follow these rules: https://github.com/dherman/defense-of-dot-js/blob/master/proposal.md This causes the app to break if I wholesale change the webpack configuration to:
resolve: {
mainFields: ['module']
}
The mainFields has to be set to main to currently get the app to work. This causes it to always pull in the CommonJS version of every dependency and miss out on treeshaking. Hoping to do something like this:
resolve: {
foo: {
mainFields: ['main']
},
bar: {
mainFields: ['module'],
}
Package foo gets bundled into my app via its main field and package bar gets bundled in via its module field. I realize the benefits of treeshaking with the bar package, and I don't break the app with foo package (has a module field that is not proper module syntax).
One way to achieve this would be instead of using resolve.mainFields you can make use of resolve.plugins option and write your own custom resolver see https://stackoverflow.com/a/29859165/6455628 because by using your custom resolver you can programmatically resolve different path for different modules
I am copy pasting the Ricardo Stuven's Answer here
Yes, it's possible. To avoid ambiguity and for easier implementation,
we'll use a prefix hash symbol as marker of your convention:
require("#./components/SettingsPanel");
Then add this to your configuration file (of course, you can refactor
it later):
var webpack = require('webpack');
var path = require('path');
var MyConventionResolver = {
apply: function(resolver) {
resolver.plugin('module', function(request, callback) {
if (request.request[0] === '#') {
var req = request.request.substr(1);
var obj = {
path: request.path,
request: req + '/' + path.basename(req) + '.js',
query: request.query,
directory: request.directory
};
this.doResolve(['file'], obj, callback);
}
else {
callback();
}
});
}
};
module.exports = {
resolve: {
plugins: [
MyConventionResolver
]
}
// ...
};
resolve.mainFields not work in my case, but resolve.aliasFields works.
More details in https://stackoverflow.com/a/71555568/7534433
I have a NativeScript application that I'm trying to add iBeacon support to using the iBeacon plugin. The application builds successfully and is synced to my phone (I'm using SideKick). When the app runs, it has a fatal javascript exception. The javascript error is reported at:
file:///app/tns_modules/tns-core-modules/ui/builder/builder.js:244:56: JS ERROR Error: Building UI from XML. #file:///app/app-root.xml:18:9
That line is where the page that attempts to access the iBeacon code is defined:
<Frame defaultPage="views/search/search-page"></Frame>
and the specific error is:
Importing binding name 'BeaconLocationOptions' is not found.
I'm assuming this occurs as part of the following import statement:
import {NativescriptIbeacon, BeaconCallback, BeaconLocationOptions, BeaconLocationOptionsIOSAuthType, BeaconLocationOptionsAndroidAuthType, BeaconRegion, Beacon } from 'nativescript-ibeacon';
The above import statement is what is documented as part of the iBeacon documentation.
There is a nativescript-ibeacon directory under node_modules in my project. The specific ios file seems to be there:
/Users/edscott/NativeScript/beacon-test/node_modules/nativescript-ibeacon/nativescript-ibeacon.ios.js
I'm not sure if it is a problem in my code or a problem with configuration - maybe something missing that stops the ibeacon files from being deployed properly to the device.
My code is in javascript, but I have installed the typescript plugin. It looks like this iBeacon plugin assumes the app is written in typescript.
I'm looking for help in determining what to try next.
FYI...I've tried pulling the source files out of the node_modules and incorporating them directly into my project. After resolving many issues with this approach, I eventually hit the same wall - a problem importing the code when running on the device.
Below is the code that is using the iBeacon plugin:
const observableModule = require("tns-core-modules/data/observable");
import {NativescriptIbeacon, BeaconCallback, BeaconLocationOptions, BeaconLocationOptionsIOSAuthType, BeaconLocationOptionsAndroidAuthType, BeaconRegion, Beacon } from 'nativescript-ibeacon';
function SearchViewModel() {
let callback = {
onBeaconManagerReady() {
// start ranging and/or monitoring only when the beacon manager is ready
this.nativescriptIbeacon.startRanging(this.region);
this.nativescriptIbeacon.startMonitoring(this.region);
},
didRangeBeaconsInRegion: function(region, beacons) {
console.log("didRangeBeaconsInRegion");
},
didFailRangingBeaconsInRegion: function(region, errorCode, errorDescription) {
console.log("didFailRangingBeaconsInRegion");
}
};
let options = {
iOSAuthorisationType: BeaconLocationOptionsIOSAuthType.Always,
androidAuthorisationType: BeaconLocationOptionsAndroidAuthType.Coarse,
androidAuthorisationDescription: "Location permission needed"
};
let nativescriptIbeacon = new NativescriptIbeacon(callback, options);
let region = new BeaconRegion("HelloID", "2f234454-cf6d-4a0f-adf2-f4911ba9ffa6");
const viewModel = observableModule.fromObject({
"beaconData": "not set yet",
"onTapStart": function() {
this.set("beaconData", "started");
console.log("tapped start");
if (!nativescriptIbeacon.isAuthorised()) {
console.log("NOT Authorised");
nativescriptIbeacon.requestAuthorization()
.then(() => {
console.log("Authorised by the user");
nativescriptIbeacon.bind();
}, (e) => {
console.log("Authorisation denied by the user");
})
} else {
console.log("Already authorised");
nativescriptIbeacon.bind();
}
},
"onTapStop": function() {
this.set("beaconData", "stopped");
console.log("tapped stop");
nativescriptIbeacon.stopRanging(region);
nativescriptIbeacon.stopMonitoring(region);
nativescriptIbeacon.unbind();
}
});
return viewModel;
}
module.exports = SearchViewModel;
I have created a playground for you here.
If you look into example, I am importing NativescriptIbeacon from the main folder and rest from the common folder.
P.S. This plugin has dependency on nativescript-permission
import { NativescriptIbeacon } from '../nativescript-ibeacon';
import {
BeaconRegion, Beacon, BeaconCallback,
BeaconLocationOptions, BeaconLocationOptionsIOSAuthType, BeaconLocationOptionsAndroidAuthType
} from "../nativescript-ibeacon/nativescript-ibeacon.common";
This answer solved my problem along with another modification. After splitting the import up I still had the same error. Then I read the following page about modules:
https://docs.nativescript.org/core-concepts/android-runtime/getting-started/modules
Based on this statement:
If the module identifier passed to require(moduleName) does not begin
with '/', '../', or './', then NativeScript will lookup the module
within the tns_modules folder
I assumed that maybe only require does the proper lookup into tns_modules.
I refactored the import to use require instead, and that worked. My changes are below. There may be a more efficient way to do this, but it worked for me.
const nsb = require("nativescript-ibeacon/nativescript-ibeacon.js");
const nsbc = require("nativescript-ibeacon/nativescript-ibeacon.common.js");
const NativescriptIbeacon = nsb.NativescriptIbeacon;
const BeaconCallback = nsbc.BeaconCallback;
const BeaconLocationOptions = nsbc.BeaconLocationOptions;
const BeaconLocationOptionsIOSAuthType = nsbc.BeaconLocationOptionsIOSAuthType;
const BeaconLocationOptionsAndroidAuthType = nsbc.BeaconLocationOptionsAndroidAuthType
const BeaconRegion = nsbc.BeaconRegion;
const Beacon = nsbc.Beacon;
I'm following this tutorial. http://www.c-sharpcorner.com/article/using-mvc-6-and-angularjs-2-with-net-core/
I have gotten to the point of using gulp to copy files to the lib-npm folder. All the expected files copy except angular. I receive no error message, the files just are there.
here is my gulp file
/// <binding />
/*
This file in the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/
"use strict";
var gulp = require("gulp");
var root_path = {
webroot: "./wwwroot/"
};
//library source
root_path.nmSrc = "./node_modules/";
//library destination
root_path.package_lib = root_path.webroot + "lib-npm/";
gulp.task("copy-systemjs", function () {
return gulp.src(root_path.nmSrc + '/systemjs/dist/**/*.*', {
base: root_path.nmSrc + '/systemjs/dist/'
}).pipe(gulp.dest(root_path.package_lib + '/systemjs/'));
});
gulp.task("copy-angular2", function () {
return gulp.src(root_path.nmSrc + '/angular2/bundles/**/*.js', {
base: root_path.nmSrc + '/angular2/bundles/'
}).pipe(gulp.dest(root_path.package_lib + '/angular2/'));
});
gulp.task("copy-es6-shim", function () {
return gulp.src(root_path.nmSrc + '/es6-shim/es6-sh*', {
base: root_path.nmSrc + '/es6-shim/'
}).pipe(gulp.dest(root_path.package_lib + '/es6-shim/'));
});
gulp.task("copy-rxjs", function () {
return gulp.src(root_path.nmSrc + '/rxjs/bundles/*.*', {
base: root_path.nmSrc + '/rxjs/bundles/'
}).pipe(gulp.dest(root_path.package_lib + '/rxjs/'));
});
gulp.task("copy-all", ["copy-rxjs", 'copy-angular2', 'copy-systemjs', 'copy-es6-shim']);
I have also noticed that my .\node_modules\Angular2 folder in my project doesn't have an .js files in it. Is this normal?
Angular2 version is 1.0.2
I receive the following errors on build because the files are missing
Cannot find name 'Component'.
Build:Cannot find module 'angular2/core'.
Build:Cannot find module 'angular2/platform/browser'.
Build:Cannot find name 'Component'.
Cannot find module 'angular2/core'.
Cannot find module 'angular2/platform/browser'
I would suggest you not to copy node_modules every time you build an app. You can easily amend the UseStaticFiles middleware inside the Startup.cs class as described here. By doing this your node_modules stay where they are and you don't need to repeatedly copy them.
Btw. Recently (before switching to UseStatisFiles modification) I have done the same in the Gulp and the following has worked well:
gulp.task('build-angular-js', function () {
return gulp.src(paths.angularJs)
.pipe(cache('linting'))
.pipe(gulp.dest(paths.jsNgDest));
});
..where paths equals to:
var paths = {
webroot: "./wwwroot/",
angularJs: [
"./node_modules/core-js/client/shim.min.js",
"./node_modules/zone.js/dist/zone.js",
"./node_modules/reflect-metadata/Reflect.js",
"./node_modules/systemjs/dist/system.src.js",
"./App/External/systemjs.config.js",
"./node_modules/#angular/**/*.js",
"./node_modules/rxjs/**/*.js"
],
appJs: [
"./App/App/**/*.js"
]
};
paths.jsDest = paths.webroot + "app";
paths.jsNgDest = paths.webroot + "app";
The complete template and all sources including gulpfile.js can be found here on GitHub. Note that cache is a gulp plugin to avoid copying not modified files. As said above though - better to avoid copying node_modules.
I tried to integrated kibana with kendo-ui to view the visuals at the kibana dashboard.Is that possible to do like that?
yes.. but there is no official process provided by kibana #team.. I have done this using creating custom visualization plugin..
Plugin index.js
'use strict';
module.exports = function (kibana) {
return new kibana.Plugin({
uiExports: {
visTypes: ['plugins/kendo_vislib_vis_types/kendo_vislib_vis_types']
}
});
};
kendo_vislib_vis_types
define(function (require) {
const visTypes = require('ui/registry/vis_types');
visTypes.register(require('plugins/kendo_vislib_vis_types/line'));
visTypes.register(require('plugins/kendo_vislib_vis_types/bar'));
visTypes.register(require('plugins/kendo_vislib_vis_types/pie'));
visTypes.register(require('plugins/kendo_vislib_vis_types/metric'));
});
Remaining followed http://logz.io/blog/kibana-visualizations/
esResponse Data should be formatted in kendo required format using
$scope.$watch('esResponse', function (resp) {
if (resp) {
var currentState = $scope.vis.getState();
$scope.vis.setState(ktInterval.changeInterval(currentState));
$scope.kendoOptionGroup = [];
// console.log(tabifyAggResponse($scope.vis, resp));
$scope.resp = +moment();
$scope.processTableGroups(tabifyAggResponse($scope.vis, resp));
}
});
Note: CSS files injected with hardcoded way directly into src/ui/ui_app.jade, because though plugin means css images path should be in kibana understandable format which need modify manually in kendo.*.min.css.
kendo CSS files injecting to kibana
var files = [
bundleFile('commons.style.css'),
bundleFile('kendo/styles/kendo.default.min.css'),
bundleFile('kendo/styles/kendo.common.min.css'),
bundleFile('#{app.id}.style.css'),
bundleFile('custom.style.css'),
bundleFile('commons.bundle.js'),
bundleFile('#{app.id}.bundle.js')
];