Develop Reference

Parcel Bundler beautify, lint, and create .min.js

I'm new the world of automating/testing/bunding with JS and I've got parcel setup for the most part but I noticed that when it builds files, it does not actually save them with the .min.js part in the file name. I'm wondering if theres a way to do this without having to rename the build file manually.
I'm also trying to find a way to have parcel go through the original source files(the ones that you work on) and lint and beautify them for me
Here's what my package.json looks like
{
"name": "lpac",
"version": "1.3.1",
"description": "",
"dependencies": {},
"devDependencies": {
"parcel": "^2.0.0-rc.0"
},
"scripts": {
"watch": "parcel watch --no-hmr",
"build": "parcel build"
},
"targets": {
"lite-maps": {
"source": ["./path/file1.js", "./path/file2.js", "./path/file3.js"],
"distDir": "./path/build/"
}
},
"browserslist": "> 0.5%, last 2 versions, not dead",
"outputFormat" : "global",
}
I checked out the docs but I couldn't find anything on linting or beautifying with parcel. How can i go about doing that? If you have tutorial links to doing so please also share because resources/tutorials seem scarce for anything other than the basic watching and building files

Unfortunately, there is no out-of-the-box setting that can cause parcel javascript output look like [fileName].[hash].min.js instead of [fileName].[hash].js. The .min.js extension is just a convention to keep output files distinct from source files, though - it has no effect at runtime - and the fact that parcel does automatic content hashing makes it easy enough to tell this. And even though they don't have a .min.js extension, these output files are definitely still minified and optimized by default.
However, if you really, really want this anyways, it's relatively simple to write a Namer plugin for parcel that adds .min.js to all javascript output:
Here's the code:
import { Namer } from "#parcel/plugin";
import path from "path";
export default new Namer({
name({ bundle }) {
if (bundle.type === "js") {
const filePath = bundle.getMainEntry()?.filePath;
if (filePath) {
let baseNameWithoutExtension = path.basename(filePath, path.extname(filePath));
// See: https://parceljs.org/plugin-system/namer/#content-hashing
if (!bundle.needsStableName) {
baseNameWithoutExtension += "." + bundle.hashReference;
}
return `${baseNameWithoutExtension}.min.js`;
}
}
// Returning null means parcel will keep the name of non-js bundles the same.
return null;
},
});
Then, supposing the above code was published in a package called parcel-namer-js-min, you would add it to your parcel pipeline with this .parcelrc:
{
"extends": "#parcel/config-default",
"namers": ["parcel-namer-js-min", "..."]
}
Here is an example repo where this is working.
The answer to your second question (is there "a way to have parcel go through the original source files(the ones that you work on) and lint and beautify them for me") is unfortunately, no.
However, parcel can work well side-by-side with other command line tools that do this do this. For example, I have most of my projects set up with a format command in the package.json, that looks like this:
{
...
"scripts": {
...
"format": "prettier --write src/**/* -u --no-error-on-unmatched-pattern"
}
...
{
You can easily make that command automatically run for git commits and pushes with husky.

JSDoc 3 conf.json include not working

I am trying to build a project using JSDoc-3.5.5. I am currently trying to run a test for errors using a small sample of the files for the project. I manually included a few files in my conf.json file but when I run the test the terminal tells me "there are no input files to process." My conf.json file is shown below. If anyone can help me get this to run I would be very appreciative.
{
"tags": {
"allowUnknownTags": true
},
"recurseDepth": 10,
"source": {
"include": [
"/home/cordonem/bitbucket/workdir/src/isl/primitives/analytics/isl_analytics_module.c",
"/home/cordonem/bitbucket/workdir/src/isl/primitives/analytics/isl_analytics_module.h",
"/home/cordonem/bitbucket/workdir/src/isl/primitives/analytics/isl_calculator.c",
"/home/cordonem/bitbucket/workdir/src/isl/primitives/analytics/isl_calculator.h",
"/home/cordonem/bitbucket/workdir/src/isl/primitives/analytics"
],
"includePattern": ".+\\.js(doc|x)?$",
"excludePattern": "(^|\\/|\\\\)_"
},
"plugins": [
"/home/cordonem/jsdoc-3.5.5/plugins/commentsOnly"
],
"templates": {
"cleverLinks": false,
"monospaceLinks": false,
"default": {
"outputSourceFiles": true
}
}
}
Also, as a side note, if anyone knows how to make JSDoc stop trying to read the Makefile that would be very helpful information as well, as the Makefile throws errors when I try to run the full project.

you forgot to add the input files that should be processed by jsdoc. Here is how i did this in my project through CLI:
I ran this commands from my project's root.
./node_modules/.bin/jsdoc ./src/app/ -r -c ./node_modules/jsdoc/conf.json.EXAMPLE
which is same as shown in here, please read the linked document to understand the meaning of everything.
conf.json is same as conf.json.EXAMPLE

standard aurelia template referencing file outside src directory

I have created a new aurelia project via au new and have no issues referencing typescript files in the src folder. For example in main.ts this works:
main.ts
import { Util } from './util'; //in aurelia-app\src
new Util();
util.ts
export class Util{ }
When I move util.ts up one level, this breaks the au CLI:
import { Util } from '../util'; //in aurelia-app\
Error:
Tracing main... ------- File not found or not accessible ------
| Location: D:/temp/aurelia-test1/aurelia-app/util.js
| Requested by:> D:/temp/aurelia-test1/aurelia-app/src/main.js
| Is this a package?
Make sure that it is configured in aurelia.json and that it is not a
Node.js package
Can someone tell me why the CLI doesn't like this and possibly how to fix it ?
There is a clue insofar as the log states its looking for util.js however this doesnt explain why it does work when util.ts is in the src folder because i do not see util.js in this folder either.
update
As per #Jesse answer below you can modify aurelia.json to fix the problem as stated above - however this fails if you want to go another directory higher. For example
import { Util } from '../../util';

That is because your aurelia.json is configured to transpile all .ts files in the src-folder:
"transpiler": {
"id": "typescript",
"displayName": "TypeScript",
"fileExtension": ".ts",
"dtsSource": [
"./custom_typings/**/*.d.ts"
],
"source": "src/**/*.ts" <--- right here
},
Therefore it won't transpile your typescript file in the root. You can change the transpiler settings in the aurelia.json to overcome this, but I'd recommend keeping your typescript in the src-folder.

Failing to resolve dependency for Ext.ux

I am using ExtJS 6.2
I have the following line in my app.json:
"requires": [
"font-awesome",
"ux"
],
I am trying to create a simple text view using LiveSearchGrid.js, so I have the following in my app_name=md_registry folder md_registry/app/view/main/ListTest.js:
Ext.define('md_registry.view.main.ListTest', {
extend: 'Ext.ux.LiveSearchGridPanel',
//xtype: 'row-expander-grid',
//store: 'Patients',
xtype: 'mainlisttest',
requires: [
'md_registry.store.Patients',
'Ext.ux.LiveSearchGridPanel'
],
When I try doing a sencha app build, I get the following compiler error:
Failed to resolve dependency Ext.ux.LiveSearchGridPanel for file md_registry.view.main.ListTest
I have verified that this file exists in the path:
md_registry/ext/packages/ux/classic/src
From everything I've read, specifying the above requires in my app.json should be sufficient, but it's obviously not.

You are right now creating a universal app, but not using the correct folders for your code. You should definitely look into either creating a classic-only app, or a universal app with correct folder structure. If you want to make a universal app, but not now, you can compile only classic.

The solution was completely unobvious:
Had to comment this out from the "builds" profile in app.json:
"modern": {
"toolkit": "modern",
"theme": "theme-triton",
"sass": {
"generated": {
"var": "modern/sass/save.scss",
"src": "modern/sass/save"
}
}
}
I hope this helps someone!

What is the proper folder structure for a polymer app?

I've got an app with several custom elements in it, and I'm writing tests, and I'm not sure how the directories are supposed to be set up for tests to work.
Is it something like:
myApp
myApp/bower_components
myApp/test
myApp/test/myApp
myApp/test/myElement1
myApp/test/myElement2
myApp/test/myElement3
myApp/src
myApp/src/myApp
myApp/src/myElement1
myApp/src/myElement2
myApp/src/myElement3
myApp/demo
Or does each element get a test/ subfolder? Like
myApp/src/myElement1/test
myApp/src/myElement2/test
myApp/src/myElement3/test
According to the docs here each element has a test folder that can be accessed via the browser when you use polymer serve like so localhost:8080/components/my-el/test/my-el_test.html

The test should be in their own folder separated from the app main directory to facilitate the Polymer CLI's build process. (Making your app production ready.)
Recommended Structure:
myApp/test/myElement1
myApp/src/myElement1
Here’s an example polymer.json file from the Shop app: ((No Test Folder))
polymer.json
{
"entrypoint": "index.html",
"shell": "src/shop-app.html",
"fragments": [
"src/shop-list.html",
"src/shop-detail.html",
"src/shop-cart.html",
"src/shop-checkout.html",
"src/lazy-resources.html"
],
"sources": [
"src/**/*",
"data/**/*",
"images/**/*",
"bower.json"
],
"extraDependencies": [
"manifest.json",
"bower_components/webcomponentsjs/webcomponents-lite.js"
],
"lint": {
"rules": ["polymer-2-hybrid"]
}
}