I'm adding internalization to one of my projects, and facing the issue with eslint, *.ejs and i18n.
<li class="nav-item">
<a class="nav-link" href="/products">
<i class="ni ni-tv-2 text-primary"></i> <%= __('Products')%>
</a>
</li>
gives me the errors:
eslint: error
prettier/prettier - Replace `·__('Products')` with `__('Products');⏎`
eslint: error
no-undef - '__' is not defined.
Trying to find some already existed integrations of eslint with i18n and ejs and no luck yet.
Any recommendations how to fix it?
PS. editor: sublime 3, lang: nodejs
Related
I've been trying to learn AWS's CDK and one of my attempts involved using a seperate repositories for both the infrastructure and the application itself.
My application repository is the bog standard vite#latest install. No changes.
I'm having issues where when i deploy, the build is crashing with codeBuilds log stating src/App.tsx(2,23): error TS2307: Cannot find module './assets/react.svg' or its corresponding type declarations.
I've tried adjusting the tsconfig to include an #types folder with declarations for svg but this didn't work at all. It just gave more typescript errors.
I feel like i'm missing something really silly.
My CDK Pipeline:
const pipeline = new CodePipeline(this, "CahmFrontendPipeline", {
pipelineName: "CahmFrontendPipeline",
synth: new ShellStep("Synth", {
input: CodePipelineSource.gitHub("myuser/myrepo", "master", {
authentication: cdk.SecretValue.secretsManager("MY_SECRET"),
}),
primaryOutputDirectory: "dist",
commands: [
"cd frontend",
"npm i",
"npm run build",
"npx cdk synth",
],
}),
});
This all works right till the codebuild. I've tried changing the image it's using as well but to no avail. Has anyone had this problem and might be able to point me in the right direction?
Things get confusing because paths act differently between dev and build (prod). I created a very simple example sandbox to help visual things using the Vite starter app. I would also recommend reading the Static Asset Handling. Also incredibly useful are the Vite Build Options which let you change where files are output.
Ideally, you want to use import reactSVG from './assets/react.svg' at the top of your component, then reference that src in the render using src={reactSVG). Both dev and build will be happy with that.
Or you should use an absolute path like /assets/react.svg, removing the . in front.
Besides the sandbox above, I wrote detailed notes on what's happening inline above each image to help the understanding.
import { useState } from "react";
import reactLogo from "./assets/react.svg";
import "./App.css";
function App() {
const [count, setCount] = useState(0);
return (
<div className="App">
<div>
<a href="https://vitejs.dev" target="_blank">
{/**
* In dev, /vite.svg defaults to the "/public/vite.svg"
* In build/prod, /vite.svg defaults to "/dist/vite.svg"
* Use absolute paths or imports (below) when possible.
*/}
<img
src="/vite.svg"
className="logo"
alt="Vite logo"
width="25"
height="25"
/>
</a>
<a href="https://reactjs.org" target="_blank">
{/**
* Due to import magic, this works in both dev / build (prod)
* Use imports or absolute paths when possible.
*/}
<img
src={reactLogo}
className="logo react"
alt="React logo"
width="25"
height="25"
/>
</a>
{/**
* Here is where things go wrong with the default configuration:
*
* Example --- src="./assets/react.svg" won't work by default. Why?
* In development, "./" equates to your project root, "/"
*
* In a basic Vite project, root contains "src", "public", and "dist", if you ran the `npm run build` command.
* As you can see, there is no "assets" folder in project root. It's only contained
* within "src" or the "dist" folder. This is where things get interesting:
*
* When you "build" your app, Vite appends unique strings at the end of your compiled .js
* files in order to avoid cache side-effects on new deployments in the front-end.
*
* So in the built app folder ("dist"), your assets will look something like this:
*
* /dist/assets/react-35ef61ed.svg
* /dist/assets/index-d526a0c5.css
* /dist/assets/index-07a082e1.js
*
* As you can see, there is no "/assets/react.svg". It does not exist in the build,
* which is why it's recommended that you import images at the top of your component
* for local assets. You can use remote assets as inline string paths. ("https://...")
*/}
<a href="https://vitejs.dev" target="_blank">
<img
src="./assets/react.svg"
className="logo"
alt="Never be visible"
width="25"
height="25"
style={{ border: "1px red solid" }}
/>
</a>
{/* only works in dev, non-build */}
<a href="https://vitejs.dev" target="_blank">
<img
src="/src/assets/react.svg"
className="logo"
alt="Visible in dev"
width="25"
height="25"
style={{ border: "1px solid green" }}
/>
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.jsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</div>
);
}
export default App;
So to those who find this question i've put here, the problem was from 2 different sources for me.
First, The version of the image used for the codebuild was defaulting to version 1 every time I redeployed as i hadn't chosen a specific image to use.
Secondly, this pipeline function isn't made for what i wanted it to do. For context, if you are wanting to build a source => build => deploy framework, make sure to use aws_codePipeline.Pipeline to build out each step.
You can find good examples of this in their documentation.
I'm currently learning about npm and have npm installed Vue.js. However, this does not work when I try to use create a simple vue instance from my view. It works however when I enter a CDN link in the script source.
So this works:
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12/dist/vue.js"></script>
<div id="app">
{{ message }}
</div>
//This works fine
<script src="node_modules/vue/dist/vue.js"></script>
<div id="app">
{{ message }}
</div>
//This does NOT work
My package.json looks like this:
"dependencies": {
"express": "^4.17.1",
"vue": "^2.6.12"
}
So what am I missing in order to get the vue from the node_modules folder?
You don't use relative paths with node_modules.
Try using an import statement:
import Vue from 'vue'
new Vue({ el: '#app' })
Or better yet, use the Vue CLI and run vue create <project-name>. This way you can use Single-File-Components and all the scaffolding is handled for you.
So, after i upgraded my Angular Application to Angular 10 (from 7) i get the Following Error when serving the Application via ng serve.
ERROR in ./src/app/lizenz-list/lizenz-list.component.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
The HTML file looks like this
<ng-template #CRUDTemplatePluginTableCaption>
<div class="ui-g-12 ui-md-6">
<button type="button" style="margin-right: 10px" pButton icon="ui-icon-add"
(click)="addCRUDItem()"></button>
<button type="button" pButton icon="far fa-server" (click)="getServerInfo()"></button>
</div>
</ng-template>
The template of lizenz-list.ts looks like this:
template: `${CRUDBasicListComponent_Template || ''}${LizenzListComponent_Template}`
Perhaps this could be the issue?
On Angular 7 everything worked fine, i just cant find the answer to the Problem.
EDIT: I am Using PrimeNg as an UI Library.
CRUDBasicListComponent_Template is an Exported html Template that looks like this:
<p-table [properties etc..]>
<ng-template pTemplate="caption">
<!--Where the ng-Template from Lizenz should be replaced -->
<ng-container *ngTemplateOutlet="CRUDTemplatePluginTableCaption">
</ng-container>
</ng-template>
<ng-template pTemplate="header" let-columns>
<!--HEADER-->
</ng-template>
<ng-template pTemplate="body" let-CRUDItem let-columns="columns">
<!--BODY WITH DATA-->
</ng-template>
</p-table>
When I run the following command on my windows command line mocha --reporter spec > report.html I get something that I cannot really use in my browser.
[0m[0m
[0m Routes[0m
[32m √[0m[90m all GET routes should be bound to a function [0m
[32m √[0m[90m all POST routes should be bound to a function [0m
[32m √[0m[90m should have one for creating CU [0m
[0m Database[0m
[32m √[0m[90m should be online, connectable and the right one [0m[31m(156ms)[0m
[0m HTTPS API[0m
[0m authentication[0m
[32m √[0m[90m is mandatory [0m[31m(1109ms)[0m
[0m entity[0m
[32m √[0m[90m lookup should work [0m[31m(172ms)[0m
[36m - creation should work[0m
[0m Website[0m
[0m pages[0m
[32m √[0m[90m should contain quite a few of them [0m
[32m √[0m[90m all of them should have internal links to existing pages [0m
[92m [0m[32m 8 passing[0m[90m (2s)[0m
[36m [0m[36m 1 pending[0m
I would like some output as shown in this example http://visionmedia.github.io/mocha/example/tests.html which actually combines documentation together with the test result. Just the test result would be enough for me.
All searches that I do tell me about code coverage to get html, but I don't want that for now. I only need a html report out of Mocha (testing my node application) that I can view in my browser. Of course I can make something myself, but this seems trivial so I expect somebody to have created a custom reporter.
You can use mochawesome. It's efficient and outputs both JSON and elegantly styled HTML reports.
Since most of us have mocha installed globally, it's best to install mochawesome globally as well.
npm install -g mochawesome
and then just run:
mocha --reporter mochawesome
from your test directory.
I found the answer in mocha-unfunk-reporter. A mocha reporter without console funkyness and with html reporting capabilities.
Use as follows:
npm install mocha-unfunk-reporter
If you installed Mocha globally, you need to install mocha-unfunk-reporter globally (add -g) as well otherwise you get a mocha invalid reporter error.
In your test.js add options to set styling to html with css colors or css classes. Use style css for the latter: process.env['mocha-unfunk-style'] = 'css';
Run mocha --reporter mocha-unfunk-reporter > unfunk.html
You'll get:
<span class="mw-plain"></span>
<span class="mw-accent">-></span> running <span class="mw-accent">4 suites</span>
<span class="mw-accent">Routes</span>
<span class="mw-plain">all GET routes should be bound to a function.. </span><span class="mw-success">ok</span>
<span class="mw-plain">all POST routes should be bound to a function.. </span><span class="mw-success">ok</span>
<span class="mw-plain">should have one for creating CU.. </span><span class="mw-success">ok</span>
<span class="mw-accent">Database</span>
<span class="mw-plain">should be online, connectable and the right one.. </span><span class="mw-success">slow</span><span class="mw-error"> (125ms)</span>
<span class="mw-accent">HTTPS API</span>
<span class="mw-accent">authentication</span>
<span class="mw-plain">is mandatory.. </span><span class="mw-success">medium</span><span class="mw-warning"> (47ms)</span>
<span class="mw-accent">entity</span>
<span class="mw-plain">lookup should work.. </span><span class="mw-success">ok</span>
<span class="mw-plain">creation should work.. </span><span class="mw-warning">pending</span>
<span class="mw-accent">Website</span>
<span class="mw-accent">pages</span>
<span class="mw-plain">should contain quite a few of them.. </span><span class="mw-success">ok</span>
<span class="mw-plain">all of them should have internal links to existing pages.. </span><span class="mw-success">ok</span>
<span class="mw-plain">-> </span><span class="mw-success">passed 12</span> of <span class="mw-accent">12 tests</span>, left <span class="mw-warning">1 pending</span> (282ms)
Exactly what I needed!
Another option is using mochawesome: https://github.com/adamgruber/mochawesome
With the following script you can execute the tests (in the test/ folder) and view the results (in the report folder):
var Mocha = require('mocha'),
fs = require('fs'),
path = require('path'),
open = require('open');
var mocha = new Mocha({
reporter: 'mochawesome',
reporterOptions: {
reportDir: 'report',
reportName: 'report',
}
});
var testDir = './tests'
fs.readdirSync(testDir).forEach(function(file){
mocha.addFile(
path.join(testDir, file)
);
});
mocha.run(function(failures){
open(__dirname + '/report/report.html', 'chrome');
process.on('exit', function () {
process.exit(failures);
});
});
How can I generate this HTML using Jade
<a class="btn btn-primary btn-large" data-toggle="modal" href="#websiteModal">
<i class=" icon-map-marker icon-white"></i>
Configure for Website</a>
I tried
a.btn.btn-primary.btn-large(data-toggle="modal",href="#websiteModal") Configure for Website
i.icon-map-marker.icon-white
But it puts the <i> after "Configure for Website" text.
You can either do:
a.btn.btn-primary.btn-large(data-toggle="modal",href="#websiteModal")
i.icon-map-marker.icon-white
| Configure for Website
Or if you are feeling fancy:
a.btn.btn-primary.btn-large(data-toggle="modal",href="#websiteModal")='Configure for Website'
i.icon-map-marker.icon-white