sass-brunch omits modified SCSS on live-reload - phoenix-framework

On my Phoenix project, I found a peculiar behavior of sass-brunch.
Here are the short descriptions of my problem:
It generates a correct app.css on the priv/static/css directory when the Phoenix server started in dev envrionment.
When I modify one of SCSS files, the app.css gets generated but lacks only the lines from the modified SCSS file. It keeps the lines from the unmodified files.
This problem occurs on Ubuntu 16.04, but not on macOS.
On the log file, I noticed an entry that may be related to this issue:
[debug] Duplicate channel join for topic "phoenix:live_reload" in Phoenix.LiveReloader.Socket. Closing existing channel for new join.
I don't see such a line on my Mac.
My environment:
Ubuntu 16.04 Desktop
Phoenix 1.2.5
Node.js 8.9.1
npm 5.5.1
Brunch 2.10.7
sass-brunch 2.10.4
My package.json:
{
"repository": {},
"license": "MIT",
"scripts": {
"deploy": "brunch build --production",
"watch": "brunch watch --stdin"
},
"dependencies": {
"phoenix": "file:deps/phoenix",
"phoenix_html": "file:deps/phoenix_html"
},
"devDependencies": {
"babel-brunch": "6.0.6",
"brunch": "2.10.7",
"clean-css-brunch": "2.10.0",
"sass-brunch": "^2.10.4",
"uglify-js-brunch": "2.1.1"
}
}
[UPDATE]
I found an interesting fact.
When I edit SCSS files using vim, the app.css gets generated normally.
When I edit them using atom, things do not go well.

I found a workaround to my problem.
Put these lines to the brunch-config.js:
watcher: {
usePolling: true
}
As the documentation of Brunch says, watcher gets slower but can be more reliable by setting true to this option.
The usePolling option is passed to chokidar, whose document says:
usePolling (default: false). Whether to use fs.watchFile (backed by polling), or fs.watch. If polling leads to high CPU utilization, consider setting this to false. It is typically necessary to set this to true to successfully watch files over a network, and it may be necessary to successfully watch files in other non-standard situations.

Related

Electron-builder macOS notarization problem with puppeteer library: Not all binaries are signed

I am currently struggling with notarizing my app with electron builder for macOS! The app uses puppeteer which causes the error that the ".localChromium" folder does not get signed! I already tried a lot of things but I was not able to fix this problem.
Here is my configuration for the package.json file:
"build": {
"asar": true,
"asarUnpack": "node_modules/puppeteer/.local-chromium/**/*",
"publish": [
{
"provider": "generic",
"url": "http://www.someProvider.com"
}
],
"appId": "SomeApp",
"afterSign": "notarize.js",
"mac": {
"icon": "build/logo.png",
"category": "public.app-category.productivity",
"target": [
"dmg", "zip"
],
"signIgnore": "/node_modules/puppeteer/.local-chromium/",
"gatekeeperAssess": false
}
This is just the lastest configuration I tried! (I read about the signIgnore property on a GitHub post where someone mentioned a similar problem and was able to fix it with this, but this hasn't changed anything - I tried multiple paths in case this one is a wrong expression). I also tried to set the "hardendedRuntime" property to true.
To use puppeteer-core is not an option!
These are some errors I receive - they all state that the content in the .localChromium folder isn't signed:
Does anyone know how to fix this problem?
I solved this by using puppeteer-in-electron. Just replace import puppeteer from 'puppeteer' with import puppeteer from 'puppeteer-core'. That way .local-chromium wont be included with your electron app because it will just use the chromium that is built in along with electron. You will also need to remove puppeteer from package.json

NG-ANTD nz-tslint-rules migration not working

I was trying to update our production project which holds 500+ modules and we certainly need this tool to make it work because manually doing so would be a nightmare. I've been the whole afternoon trying to make it work even copying and pasting your import example and haven't manage to do so.
Our imports are like following in the whole project:
import {
NzTableModule,
NzCheckboxModule,
NzInputModule,
NzFormModule,
NzSelectModule,
NzDrawerModule,
NzDividerModule,
NzToolTipModule,
NzDatePickerModule,
} from 'ng-zorro-antd';
I'm using the following config:
{
"rulesDirectory": [
"nz-tslint-rules"
],
"rules": {
"nz-secondary-entry-imports": true
}
}
package.json:
"ng-zorro-antd": "^9.3.0",
"typescript": "~3.8.3",
"nz-tslint-rules": "^0.901.2",
"#angular/core": "~9.1.12",
I'm executing the following command from the app root:
"tslint --project ."
I've managed to be sure about the script execution with a console log in the nzSecondaryEntryImportsRule.js file
Also I've notice that:
tsutils.isImportDeclaration(node)
Always returns false therefore it continues to the next iteration in the for loop
I'd appreciate any help on this.
I guess because the global version is too low.
here are three solutions:
upgrade your global tslint
npm install tslint -g
add the command to the scripts in package.json, and then use npm run lint:fix
{
"scripts": {
"lint:fix": "tslint --project tsconfig.json --fix"
}
}
run from node_modules/.bin/tslint
node_modules/.bin/tslint --project tsconfig.json --fix

Cypress not able to recognize Xpath functions

Running Cypress and came across using xpath in Cypress and I am trying the following code in .js file.
/// <reference types = "cypress" />
describe ("Test Contact us form",()=>{
it("Should be able to submit the form", ()=>{
cy.visit('some url');
cy.xpath('//a[contains (#href, "contact")]').click();
});
})
This is how my xpath node_modules directory path looks like
\Projects\node_modules\xpath
Here is my index.js
// Alternatively you can use CommonJS syntax:
// require('./commands')
require('xpath')
Here is my package.json
{
"name": "projects",
"version": "1.0.0",
"description": "test",
"main": "index.js",
"scripts": {
"test": "Thisistest"
},
"author": "",
"license": "ISC",
"devDependencies": {
"cypress": "^5.2.0",
"xpath": "0.0.29"
}
}
Here is a snippet of the package-lock.json
"xpath": {
"version": "0.0.29",
"resolved": "https://registry.npmjs.org/xpath/-/xpath-0.0.29.tgz",
"integrity": "some key",
"dev": true
},
After running the test, I am getting the following compilation error.
Its a TypeError.
cy.xpath is not a function
Seems to be a small config thing. However, followed the exact steps as given on https://github.com/cypress-io/cypress-xpath#readme
I removed and re-setup cypress and xpath again using npm through git bash and it worked.
Previously, I had setup using node.js command prompt. After installing xpath using same npm command, xpath was successfully downloaded, however, the directory name inside node_modules was just xpath instead of cypress-xpath. Now, even though I had require('xpath') under the index.json file, it was still unable to detect xpath.
[Updated for Cypress Ver- 10.9.0 in year 2022]
Use link below to install: cypress-xpath plugin
https://www.npmjs.com/package/cypress-xpath
Step 1: Install XPath Plugin using below command
npm install cypress-xpath
Step 2 Add this line to e2e.js in support folder
require('cypress-xpath');
Step 3 Add your xpath in cy.xpath method like below:
cy.xpath("//input[#name='userName']").should("be.visible");
Please make sure to check that you're getting code intellisense like this (refer image attached), once successful installation of the cypress-xpath plugin.
I had faced the same issue.
then I changed the reference types from cypress to cypress-xpath as follows
///reference types = 'cypress-xpath'
and the problem is resolved.
This might be helpful to you.
I downloaded cypress-xpath and updated the config file with requires('cypress-xpath) and then tried and it worked

How to debug server side TypeScript code in WebStorm

Comparing this to Visual Studio Code all you need to do is allow source maps and VSCode will debug TypeScript however I can't achieve the same on WebStorm.
I can easily debug server side JavaScript in WebStorm but not TypeScript
For anyone else wrestling with debugging TypeScript in WebStorm/IDEA, I had similar frustrations as OP (possibly for different reason). My issue was simply that I didn't set the working directory to the dist folder in the node run configuration. I am running tests in Jest and assumed the working dir should be the root of my project. Set it to dist and debugging started working!
Further info...
Source .ts files in src
Typescript version: 2.0.3
File tsconfig.json:
{
"compilerOptions": {
"jsx": "react",
"module": "commonjs",
"noImplicitAny": false,
"outDir": "dist",
"preserveConstEnums": true,
"removeComments": true,
"sourceMap": true,
"target": "es6",
"moduleResolution": "node"
},
"exclude": [
"node_modules",
"dist"
]
}
Jest config (in package.json):
"jest": {
"scriptPreprocessor": "<rootDir>/node_modules/ts-jest/dist/preprocessor.js",
"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx)$",
"moduleFileExtensions": [
"ts",
"tsx",
"js"
]
}
Run configuration...
Working directory: <project_root>/dist
Javascript file: ../node_modules/jest-cli/bin/jest.js
Application params: --runInBand
Hope it helps!
was trying to find a way to let Webstorm/Intellij to watch the TS file change and restart server in debug mode. Looks like ts-node-dev which IHMO is faster than nodemon in terms of live-reload because it shares Typescript compilation process between restarts.
npm i ts-node-dev --save-dev
Then in your Run/Debug Configuration, add a node.js config with below params:
JavaScript file ---> node_modules/ts-node-dev/lib/bin.js
Applicationi parameters ---> --respawn -- src/script/local.server.ts
Now save the config and run with Debug, you should be able to set break point as well as live reload server on any TS code change.
I wrapped up a small library for this if you happen to develop with aws lambda
https://github.com/vcfvct/ts-lambda-local-dev
Just want to add what worked for me with Webstorm 2021.1.1
I found the easiest way is to go to your package.json and right click the green triangle next to the npm script you want to run. Then select debug.
I am able to apply the breakpoints to my typescript code and it works perfectly. Coming from .Net where it was always pretty straight forward to debug, I am glad to see webstorm making it just as simple.
This is my npm script that I choose to debug.
"dev": "env-cmd -f ./config/dev.env concurrently -k -n COMPILER,NODEMON -c gray,blue \"tsc -w\" \"nodemon -w dist dist/index.js\"",
I'm using a specific version of node called ts-node.
First add in your package.json file:
"devDependencies": {
"ts-node": "8.1.0",
"typescript": "3.2.4"
},
Run npm install and the node_module/.bin/ directory will include the ts-node or ts-node.cmd required for Windows.
Obviously these versions will move. You may see inside the package.json of ts-node project which version of typescript they are using to be the closest as possible.
Then you can add breakpoints. The only downside I see is that you must define the Javascript file (which is a ts file) into the configuration, instead of just right-click + run.
If you have the xyz is not a function error, check that your tsconfig.json file doesn't have "noEmit": false,
For running WebStorm(2017.2.3) debugger around typescript sources I did:
Setup Node.js configuration:
Working directory: root/of/the/project (where located my package.json)
JavaScript file: dist/index.js
I am compiling my TypeScript with gulp-typescript, but more important the source-map files. So for compiling was used task like below:
const gulp = require('gulp');
const ts = require('gulp-typescript');
const sourcemaps = require('gulp-sourcemaps');
const merge = require('merge2');
const tsProject = ts.createProject('tsconfig.json', {
declaration: true,
typescript: require('typescript'),
});
gulp.task('default', () => {
const result = gulp.src('./app/**/*.ts')
.pipe(sourcemaps.init())
.pipe(sourcemaps.identityMap()) // optional
.pipe(tsProject());
return merge([
result.js
.pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '../app' }))
.pipe(gulp.dest('dist')),
result.dts
.pipe(gulp.dest('dist')),
]);
});
All source TS files located in './app' folder, all compiled files located in ./dist folder. Most important source-files option sourceRoot, wrong value not bring you to ts file.
By sourcemaps.write('.', { includeContent: false, sourceRoot: '../app' } I am writing my .map files beside .js files and make reference to app folder. I no need content in .map files because it's already there (app folder).
Thanks to #Ekaterina I was able to run Node debug with Typescript.

I try but I don't understand how build CSS from SCSS in VSCODE

All is in the title :)
How can I build css from sass file in vscode ?
In task file I just found lines for LESS not for SASS...
Thanks a lot !
I got it to work.
My root path has a /css folder underneath with my styles.scss file & the associated map file. I also had to fix my path for ruby. Once those two were working, my build showed an error where ruby couldn't find the scss file. So I fixed my task file - here is the working file. Notice the ${fileDirname} - that fixed the build errors for pathing.
{
"version": "0.1.0",
"command": "sass",
"args": ["${fileDirname}/styles.scss", "${fileDirname}/styles.css", "--trace"],
"isShellCommand": true
}
}
But this was just a test -- it doesn't watch and build more than 1 file as you would normally want to in a larger system. The docs for gulp/automation are here: https://code.visualstudio.com/Docs/languages/CSS
We don't have predefined problem matchers for SASS yet. You might want to open a feature request here https://code.visualstudio.com/Issues/List
But you can always create a problem matcher for SASS yourself. Have a look at the doc here: https://code.visualstudio.com/Docs/tasks#_defining-a-problem-matcher

Resources