Tag: “/js/**”

Trying to build vue component library using rollup and vueJs 3

Post author By Full Stack
Post date October 20, 2020
No Comments on Trying to build vue component library using rollup and vueJs 3

I am trying to create a vue component library using rollup and vuejs. It worked with vue2 but was unable to parse css with vue3. I have upgraded the dependency in package.json package.json { "name": "vue2tslibrary", "version": "0.1.59", "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "build:js": "rimraf dist && rollup -c […]

Tags ...components.reduce((obj, .gif", '.jpg', '.min.js') c.plugins.push(terser({ output: { comments: '/^!/' }, 'ANALYZE', 'Explorer >= 10', 'id', 'src'), "!**/node_modules/**" ], "@rollup/plugin-alias": "2.2.0", "@rollup/plugin-babel": "^5.2.1", "@rollup/plugin-commonjs": "^15.1.0", "@rollup/plugin-image": "^2.0.5", "@rollup/plugin-node-resolve": "^9.0.0", "@rollup/plugin-url": "^5.0.1", "@typescript-eslint/eslint-plugin": "^2.33.0", "@typescript-eslint/parser": "^2.33.0", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-typescript": "~4.5.0", "@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.1", "@vue/eslint-config-standard": "^5.1.2", "@vue/eslint-config-typescript": "^5.0.2", "/js/**", "/scss/**", "autoprefixer": "^9.8.6", "browserslist": [ "> 1%", "build:js": "rimraf dist && rollup -c && rollup -c --environment MINIFY" }, "build": "vue-cli-service build", "core-js": "^3.6.5", "cssnano": "^4.1.10", "date-fns": "^2.16.1", "dependencies": { "@mathieustan/vue-datepicker": "^0.2.8", "devDependencies": { "@babel/plugin-proposal-optional-chaining": "^7.12.1", "env": { "node": true }, "eslint-plugin-import": "^2.20.2", "eslint-plugin-node": "^11.1.0", "eslint-plugin-promise": "^4.2.1", "eslint-plugin-vue": "^6.2.2", "eslintConfig": { "root": true, "extends": [ "plugin:vue/essential", "files": [ "dist/*" ], "jpeg", "last 2 versions", "lint": "vue-cli-service lint" }, "main": "dist/cjs/index.js", "module": "dist/esm/index.js", "node-sass": "^4.14.1", "not dead" ] } rollup.config.js import vue from 'rollup-plugin-vue' import node from '@rollup/plugin-node-resolve' import cjs from '@roll, "parserOptions": { "ecmaVersion": 2020, "png", "postcss-calc": "^7.0.3", "postcss-color-function": "^4.1.0", "postcss-cssnext": "^3.1.0", "postcss-discard-comments": "^4.0.2", "postcss-discard-empty": "^4.0.1", "postcss-discard-unused": "^4.0.1", "postcss-each": "^0.10.0", "postcss-extend-rule": "^3.0.0", "postcss-import": "^12.0.1", "postcss-mixins": "^6.2.3", "postcss-nested": "^4.2.1", "postcss-rem": "^1.1.5", "postcss-simple-vars": "^5.0.2", "postcss-sort-media-queries": "^1.7.26", "postcss-url": "^8.0.0", "postcss": "^8.1.1", "presets": [ [ "@babel/preset-env", "rollup-plugin-analyzer": "^3.3.0", "rollup-plugin-babel": "^4.4.0", "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-css-only": "^2.1.0", "rollup-plugin-node-resolve": "^5.2.0", "rollup-plugin-postcss": "^3.1.8", "rollup-plugin-terser": "^7.0.2", "rollup-plugin-typescript": "^1.0.1", "rollup-plugin-typescript2": "^0.28.0", "rollup-plugin-uglify": "^6.0.4", "rollup-plugin-vue": "^6.0.0-beta.8", "rollup": "1.17.0", "sass-loader": "^10.0.3", "scripts": { "serve": "vue-cli-service serve", "sideEffects": [ "*.css", "style-resources-loader": "1.3.3", "typescript": "^3.9.3", "unpkg": "dist/vueslib.min.js", "version": "0.1.59", "vue-router": "^4.0.0-beta.13", "vue-slider-component": "^4.0.0-beta.2", "vue-template-compiler": "^2.6.12", "vue": "^3.0.1", "vuex": "^4.0.0-beta.4" }, “@vue/standard”, “@vue/typescript/recommended” ], “eslint-plugin-standard”: “^4.0.0”, “eslint”: “^6.7.2”, []) ] if (process.env.MINIFY === 'true') { config = config.filter((c) => !!c.output.file) config.forEach((c) => { c.outpu, { input: entries, { modules: false }]] } const baseFolder = './src/' const componentsFolder = 'components/' const components = fs .readdirSync(baseFolder +, {}) } const capitalize = (s) => { if (typeof s !== 'string') return '' return s.charAt(0).toUpperCase() + s.slice(1) } const vuePluginC, @import './components/style.css' return path.resolve(basedir, @import '@css/style.css' // because @css/ has 5 chars if (id.startsWith('@css')) { // basedir will resolve to, @import '~normalize.css/normalize.css' // similar to how css-loader's handling of node_modules // if (id.startsWith('~')), // { // input: 'src/index.ts', // Default to 16 // convert: 'px', // Default to false precision: 6 // Default to 5 }), // Default to rem fallback: true, // file: 'dist/vueslib.js', // individual components ...components.map((f) => mapComponent(f)).reduce((r, // name: capitalize('vu'), #TS, $rules, a) => r.concat(a), autoprefixer({ overrideBrowserslist: '> 1%, babel(babelConfig), babel(babelConfig) ] } ] } let config = [ { input: entries, babelHelpers: true, babelrc: false, basedir) { // resolve alias @css, cjs(), compilerOptions: { whitespace: 'condense' } }, compileTemplate: false, compress: { defaults: true } }) ] }, compress: { defaults: true } })) }) } return config } ERROR SCREENSHOT Component <!-- @css/_ap, css, cssnano({ zindex: false }) ] } } export default () => { const mapComponent = (name) => { return [ {, data () { return { text1: 'I am Text Component' } }, default: false, dir: 'dist/cjs', dir: 'dist/esm' }, exports: 'named', external: ['vue'], f)).isDirectory() ) const entries = { index: './src/index.ts', file: `dist/components/${name}/index.js`, file: 'dist/vueslib.esm.js' }, globals: { vue: 'Vue' } }, I am trying to create a vue component library using rollup and vuejs. It worked with vue2 but was unable to parse css with vue3. I have upgra, id.slice(5)) } // resolve node_modules, id); // } // resolve relative path, IE 6, methods: { test (): void { console.log('test1', msg: { type: Object as PropType } }, name: capitalize(name), name) => { obj[name] = (baseFolder + componentsFolder + name) return obj }, nested, node({ extensions: ['.vue', output: { format: 'cjs', output: { format: 'esm', output: { format: 'umd', plugins: [ typescript(), postcssCalc, postcssColor, postcssDiscardComment, postcssDiscardEmpty, postcssEach, postcssextend, postcssImport({ resolve (id, postcssMixin, postcssRem({ baseline: 16, postcssUrl({ url: 'inline' }), preProcessStyles: true, props: { isValid: { type: Boolean, PropType } from 'vue' export default defineComponent({ name: 'DummyComponent', Safari >= 7' }), script: 'ts' }, simplevars, sortMedia({ sort: 'mobile-first' }), style: { postcssPlugins: [ autoprefixer, template: { isProduction: true, terser({ output: { comments: '/^!/' }, this.$props.msg) } } }) @import '../../assets/styles/css/_app-partials.css'; .yellow { c, transformAssetUrls: { includeAbsolute: true }, url({ include: [ '**/*.svg', vue(vuePluginConfig)

Ask Engineering Software Engineering

Does default settings should be considered as business rules from the view point of “Clean Architecture”?

Post author By Math Dev
Post date October 19, 2020
No Comments on Does default settings should be considered as business rules from the view point of “Clean Architecture”?

The examples of default settings: Default port for server applications Default resources directory for Java Applications Default Webpack config file ("webpack.config.js") My particular case I have the utility for web application projects building, based on gulp and webpack. When user did not specified some settings in config file of his project (similar to pom.xml, webpack.config.js, […]

Tags '/{routes:.+}', 'public'), "/js/**", "/resources/**", "bootstrap", "tests" ] } } In Clean Architecture, #TS, based on gulp and webpack. When user did not specified some settings in config file of his project (similar to pom.xml, but it including, config, Database, etc.) DefaultSettins will be substituted. The example of default settings for markup preprocessing: { indentationSpacesCountInOutputCode:, for example, I need put somewhere the default settings for specific utilities (e. g. Webpack). The InternalSettings (I call them so because user can not, mustExecuteAccessibilityInspection: true } Maybe I can call it "the business rules", mustExecuteCodeQualityInspection: true, mustExecuteHTML5_Validation: true, Storage, supported file names extensions: export default { supportedSourceFileNameExtensionsWithoutDots: [ "mjs", supportedOutputFileNameExtensionsWithoutDots: [ "js" ] }; I am not sure I can call it "business rules". If default and internal settings ar, the business rules must not know anything about frameworks. And also, The examples of default settings: Default port for server applications Default resources directory for Java Applications Default Webpack c, the paths which must not be watched for browser live reloading providing for specific framework: { laravelBasedProjectRelativePathsWhichWi, webpack.config.js

Mastering Development

How to use web worker inside a for loop in javascript?

Post author By Full Stack
Post date October 17, 2020
No Comments on How to use web worker inside a for loop in javascript?

Following is the code to create a 2d matrix in javascript: function Create2DArray(rows) { var arr = []; for (var i=0;i<rows;i++) { arr[i] = []; } return arr; } now I have a couple of 2d matrices inside an array: const matrices = [] for(let i=1; i<10000; i++){ matrices.push(new Create2DArray(i*100)) } // I’m just mocking […]

Tags 'scaling', "/js/**", css, Following is the code to create a 2d matrix in javascript: function Create2DArray(rows) { var arr = []; for (var i=0;i<rows;i++) {, function() { /// this is where Webworker / parallel js needs to be act. } this is where the updates occurs. & I want the Webworker to act on, I would like to do it via a web worker so that the main thread is not blocked. I'm using paralleljs for this purpose since it will provide n, I'm creating a new Instance of parallel inside the for loop. I fear that this would be a non conventional approach. Or it would cause memory, output But as the connections and nodes grows my graph is laggy and each node is loading so slowly. So I thought a way of reducing the compu, the matrices would contain position data & this data is processed by the Webworker or parallel.js instance behind the scenes and returns the, this is an animation. So it will have to be updated for each matrix during each tick. Currently, translate etc... }).then(function (matrix) { return back so that I can use those, which is then used to draw items / update canvas UPDATE NOTE Actually

Mastering Development

File type VS-code icons do not show in Windows Explorer

Post author By Full Stack
Post date October 17, 2020
No Comments on File type VS-code icons do not show in Windows Explorer

I recently upgraded Windows 7 to Windows 10. All file type extensions that open with VS Code (.c ,.js,etc.) have the same icon in Windows Explorer, which is confusing. I know that VS code 1.28 introduced different icons for different file-types. I tried re-installing but nothing changed. Here is a picture of my Windows Explorer […]

Tags "/js/**", etc.) have the same icon in Windows Explorer, I recently upgraded Windows 7 to Windows 10. All file type extensions that open with VS Code (.c, which is confusing. I know that VS code 1.28 introduced different icons for different file-types. I tried re-installing but nothing changed.

Mastering Development

TypeError: Duplicate declaration, Module build failed Error in Typescript Project

Post author By Full Stack
Post date October 13, 2020
No Comments on TypeError: Duplicate declaration, Module build failed Error in Typescript Project

Good Day, I have code something like below In A.ts file: declare class LayerManager { //code constructor(factory: Factory); //code } let self: LayerManager; function LayerManager(factory: Factory) { //code self = this; //code } export default LayerManager; In B.ts file: import LayerManager from ‘../layer-manager/index’; //Code this.layer = new LayerManager(this.factory); //<—In order to have construct Signature I […]

Tags "/js/**", and jsx files. test: /\.(ts|js)x?$/, Any suggestion would be helpful. MINIMAL Reproduction added on GITHUB, exclude: /node_modules/, Good day, I have code something like below In A.ts file: declare class LayerManager { //code constructor(factory: Factory); //code } let, loader: require.resolve('babel-loader'), query: { compact: true } }, ts=x

Mastering Development System & Network

Selenium and python in intranet

Post author By Server Questions
Post date October 9, 2020
No Comments on Selenium and python in intranet

At the moment there is a local web solution in Python with FRAMEWORK CHERRYPY running, when deploying the application on a web server it does not work. The code or function (complement) is needed in the user’s browser, the URL of the Reuter (MODEM) http://192.168.100.1 is opened and the user and password fields automatically fill […]

Tags "/js/**", app, At the moment there is a local web solution in Python with FRAMEWORK CHERRYPY running, because the address belongs to the client's intranet. driver = webdriver.Chrome ('C: \ Python3 \ chromedriver.exe') driver.get ('http://192., or extension for my Python code that is on a server and needs access to the intranet URL of the Reuter-modem ('http://192.168.100.1/'), the important thing is that in the solution do not have to run any .exe Note: that app at the moment only works locally for obvious reasons, the URL of the Reuter (MODEM) http://192.168.100.1 is opened and the user and password fields automatically fill in. Python code sample wher, when deploying the application on a web server it does not work. The code or function (complement) is needed in the user's browser

Mastering Development

NestJS Testing: decorator is not a function

Post author By Full Stack
Post date October 5, 2020
No Comments on NestJS Testing: decorator is not a function

My dependencies: "@nestjs/common": "7.4.4", "@nestjs/core": "7.4.4", "typescript": "4.0.2", "jest": "26.4.2", "jest-junit": "11.1.0", "ts-jest": "26.3.0", I have a custom decorator: import { Inject } from "@nestjs/common"; import { DATABASE_SERVICE } from "./database.constants"; export const InjectDatabase = () => Inject(DATABASE_SERVICE); I use it in constructor for a service I’m willing to cover with tests: import { DatabaseService, […]

Tags 'build'), "!**/dist/**", "@common/(.*)": "/libs/common/src/$1", "@infra": "/libs/infrastructure/src", "@infra/(.*)": "/libs/infrastructure/src/$1" }, "@nestjs/core": "7.4.4", "/js/**", "collectCoverage": true, "emitDecoratorMetadata": true, "esModuleInterop": true, "experimentalDecorators": true, "jest-junit": "11.1.0", "jest": "^26.4.2", "module": "commonjs", "moduleFileExtensions": [ "ts", "outDir": "dist", "removeComments": true, "resolveJsonModule": true } I have in jest.config.js: setupFiles: ["./jest-setup-file.ts"], "sourceMap": true, "sourceRoot": "/", "strict": true, "strictPropertyInitialization": false, "ts-jest": "^26.3.0", "typescript": "^4.0.2" }, () => { // console.log("test"); }); }); SharedModule is a module with @Global() decorator and includes MyService in providers/exports., () => { let myService: MyService; beforeEach(async () => { const moduleRef = await Test.createTestingModule({ imports: [Shared, // "clover" // ], // "lcov", | ^ 56 | ) {} at Object. (apps/workers/my/src/shared/services/my.service.ts:53:6) at Object., apps, coveragePathIgnorePatterns: ["/node_modules/"] }; Probably moduleNameMapper doesn't resolve correctly "@infra/(.*)": "/libs/infrast, coverageReporters: ["json", coverageThreshold: { global: { branches: 80, functions: 80, I get error: TypeError: modules_1.InjectDatabase is not a function 51 | 52 | constructor( > 53 | @InjectDatabase() p, I have a custom decorator: import { Inject } from "@nestjs/common"; import { DATABASE_SERVICE } from "./database.constants"; export const, InjectDatabase } from "@infra/modules"; import { Injectable } from "@nestjs/common"; @Injectable() export class MyService { constructor(, InjectDatabase } from "@infra/modules"; My jest.config.js: module.exports = { bail: 0, InjectDatabase) and received: InjectDatabase: undefined So it seems either Jest cannot resolve imports o something is wrong with typescrip, json, lines: 80, moduleNameMapper: { "@common": "/libs/common/src", My dependencies: "@nestjs/common": "7.4.4", MyService ] }).compile(); But it didn't help, preset: "ts-jest", providers: [ { provide: DATABASE_SERVICE, roots: ["/libs", same issue: Error: Nest can't resolve dependencies of the CacheService (?). My tsconfig.json compiler options: "compilerOptions": {, setupFiles: ["./jest-setup-file.ts"], statements: 80 } }, testEnvironment: 'node', testPathIgnorePatterns: ['\\\\node_modules\\\\'], testRegex: ".*\\.test\\.ts$", Text, This file has only import of reflect lib: import 'reflect-metadata'; I tried to add to my.service.ts before MyService declaration: console, transform: { "^.+\\.ts?$": "ts-jest" }, useClass: DatabaseService }, verbose = TRUE

User Help

Is there a way to pause or turn off individual code completions for sublime text editor 3

Post author By How To
Post date September 30, 2020
No Comments on Is there a way to pause or turn off individual code completions for sublime text editor 3

I currently have a plethora or plugins installed for sublime text editor, but I was wondering if there is a way to turn off[Not Uninstall] various different code completions, so If i am working on Js or a Node application, I only see code completions for Node and Js. Currently I’m getting auto completions for […]

Tags "/js/**", and any other auto completion plugins all at the same time, articles or personal solutions that may help fix this as its bugging me, blogs, but I was wondering if there is a way to turn off[Not Uninstall] various different code completions, I currently have a plethora or plugins installed for sublime text editor, I only see code completions for Node and Js. Currently I'm getting auto completions for webGl, ie if i'm in a html file html is shown, if python, if webGl or OpenGl WebGl should be shown.. If there is not would be a good plugin for someone else to build. please could you provide instr, Python, python is shown, so If i am working on Js or a Node application, sure alot of you will know alot more about setting up Sublime than I currently do. If this is suited elsewhere please migrate it. Kind regar, until I learnt more Javascript. Any solutions would be greatly appreciated, usually the WebGl ones first.. I want only the ones that I am currently working on to show up, WebGl is something that I was interested in but have learnt little to none of

Mastering Development

How do I reflect a dotnet web api endpoint that uses query string parameters in SwagggerUI?

Post author By Full Stack
Post date September 24, 2020
No Comments on How do I reflect a dotnet web api endpoint that uses query string parameters in SwagggerUI?

I’m trying to implement a dotnet web api with API versioning that uses query strings and headers. Here im using swagger to document and test the endpoints. I successfully used path versioning and reflected the endpoints in swagger. But im struggling to understand how to reflect query string & header versioning in swagger. I tried […]

Tags 'warm', "/js/**", "API_Versioning V1.0"); c.SwaggerEndpoint("/swagger/v1.1/swagger.json", "API_Versioning V1.1"); c.SwaggerEndpoint("/swagger/v2/swagger.json", "API_Versioning V2.0"); c.SwaggerEndpoint("/swagger/v2.1/swagger.json", "API_Versioning V2.1"); c.SwaggerEndpoint("/swagger/v3/swagger.json", "API_Versioning V3.0"); }); } } }, "Balmy", "Bracing", "Chilly", "Mild", "Scorching" }; private readonly ILogger _logger; public WeatherForecastController(ILogger<WeatherForecastCont, "Sweltering", [ 55, }); c.SwaggerDoc("v1.1", }); c.SwaggerDoc("v2", // specifying the Swagger JSON endpoint. app.UseSwaggerUI(c => { c.SwaggerEndpoint("/swagger/v1/swagger.json", 0); // Supporting multiple versioning scheme option.ApiVersionReader = ApiVersionReader.Combine(new HeaderApiVersionR, 5).Select(index => new WeatherForecast { Date = DateTime.Now.AddDays(index), cool, css, Deprecated = true)] [ApiVersion("3.0")] [Route ("api")] //support query string & header versioning // [Route("api/v{version:apiVersion}/[c, etc., hot, I'm trying to implement a dotnet web api with API versioning that uses query strings and headers. Here im using swagger to document and test, IWebHostEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } app, MapToApiVersion("1.1")] public IActionResult GetV1_1() => Ok(new string[] { "Depreceated MapToApiVersion value" }); }} WeatherForecastCont, MapToApiVersion("2.1")] public IActionResult GetV2_1() => Ok(new string[] { "This is API Version 2.1" }); }} And the startup.cs file, MapToApiVersion("3.0")] public IActionResult GetV3_0() => Ok(new string[] { "MapToApiVersion value 3.0" }); [HttpGet, new Microsoft.OpenApi.Models.OpenApiInfo { Version = "v1.1", new Microsoft.OpenApi.Models.OpenApiInfo { Version = "v1", new Microsoft.OpenApi.Models.OpenApiInfo { Version = "v2.1", new Microsoft.OpenApi.Models.OpenApiInfo { Version = "v2", new Microsoft.OpenApi.Models.OpenApiInfo { Version = "v3", new QueryStringApiVersionReader("api-version")); }); } // This method gets called by the runtime. Use this met, Summary = Summaries[rng.Next(Summaries.Length)] }) .ToArray(); } [HttpGet, TemperatureC = rng.Next(-20, Title = "API_Versioning V1.1", Title = "API_Versioning V1", Title = "API_Versioning V2.1" }); c.SwaggerDoc("v3", Title = "API_Versioning V2" }); c.SwaggerDoc("v2.1", Title = "API_Versioning V3" }); c.ResolveConflictingActions (apiDescriptions => apiDescriptions.First ()

CMS Magento Mastering Development

Magento 2: How to make Product image uploader rename the image file if the same filename exists?

Post author By Ask Me
Post date September 22, 2020
No Comments on Magento 2: How to make Product image uploader rename the image file if the same filename exists?

I’m using Magento v2.3.4 and Cloudflare to cache css, js, and images. The problem is when i tried to upload product image from the backend using the same filename and extension, the image uploader still showing the old image, if i turn off the cloudflare caching , this issue doesn’t exists because the file is […]

Tags "/js/**", and images. The problem is when i tried to upload product image from the backend using the same filename and extension, I'm using Magento v2.3.4 and Cloudflare to cache css, if i turn off the cloudflare caching, the image uploader still showing the old image, this issue doesn't exists because the file is not being cached. Is there a way to rename the image when uploaded using the same filename or e