Hello i want to add videojs to my magento theme. Structure of directory.
config:
var config = {
paths: {
"videojs": "js/videojs/video.min"
},
shim: {
"videojs": {
deps: []
}
}
};
and inside view block:
<script>
define(['videojs'], function(videojs) {
'use strict';
var player = videojs('my-player', {
controls: true,
autoplay: true,
loop: true,
preload: 'auto'
});
});
</script>
In console i have Uncaught Error: Mismatched anonymous define() module: function(videojs) {
How can i fix this ?
You should change define to require in your block some like:
example.phtml
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="640"
height="264"
data-setup='{"techOrder": ["youtube"], "sources": [{ "type":
"video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}]}'>
</video>
<script>
require(['videojs'], function(videojs) {
'use strict';
var player = videojs('my-video', {
controls: true,
autoplay: true,
loop: true,
preload: 'auto'
});
});
</script>
Related
I started a new project provided by SvelteKit and added svelte-jester. I am able to run the code and tests but I get an odd coverage problem. The Header component has an SVG file which shows up as an uncovered branch and I'm not sure how to address it.
// Header.svelte
<script lang="ts">
import { page } from '$app/stores';
import logo from './svelte-logo.svg';
</script>
<header>
<div class="corner">
<a href="https://kit.svelte.dev">
<img src={logo} alt="SvelteKit" />
</a>
</div>
</header>
// Header.test.js
import '#testing-library/jest-dom'
import { render } from '#testing-library/svelte'
import Header from '../Header.svelte';
test('shows proper heading when rendered', () => {
const { getByText } = render(Header);
expect(getByText('Corner')).toBeInTheDocument();
});
Coverage:
Wondering if anyone else has had this issue and solved it. There is no branch here and logo is not a prop. How do I get test coverage for the src?
Jest Config for reference:
export default {
bail: false,
collectCoverage: true,
coveragePathIgnorePatterns: ['/jest'],
coverageThreshold: {
global: {
branches: 80,
functions: 80,
lines: 80,
statements: 80
}
},
moduleFileExtensions: ["js", "svelte", "ts"],
moduleNameMapper: {
"\\.(svg)$": "<rootDir>/src/jest/mock.js",
"^\\$src(.*)$": "<rootDir>/src$1",
"^\\$lib(.*)$": "<rootDir>/src/lib$1",
"^\\$app(.*)$": [
"<rootDir>/.svelte-kit/dev/runtime/app$1",
"<rootDir>/.svelte-kit/build/runtime/app$1"
]
},
preset: "ts-jest",
roots: ["<rootDir>/src/",],
transform: {
"^.+\\.js$": "babel-jest",
"^.+\\.svelte$": [
"svelte-jester", {
"preprocess": true
}
],
"^.+\\.ts$": "ts-jest"
},
// transformIgnorePatterns: ["node_modules"],
setupFilesAfterEnv: [
"#testing-library/jest-dom/extend-expect",
'./src/jest/setup.js'
]
}
Does anyone know how to inject a remote CSS file onto current tab without downloading it and adding to my extension package?
Here's the code I'm running:
chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
{
var activeTab = tabs[0];
chrome.scripting.insertCSS
({
target: { tabId: activeTab.id },
files: ['https://fonts.googleapis.com/css2?family=Acme']
});
chrome.scripting.insertCSS
({
target: { tabId: activeTab.id },
css: 'body{font-family:Acme !important;}'
});
});
I get the following error:
Uncaught (in promise) Error: Could not load file: 'https://fonts.googleapis.com/css2?family=Acme'.
Here's sections of the manifest I've added without luck:
"host_permissions":
[
"https://fonts.googleapis.com",
"https://fonts.gstatic.com"
],
"web_accessible_resources":
[
{
"resources": [ "css2?family=Acme" ],
"matches": [ "https://fonts.googleapis.com/*" ]
},
{
"resources": [ "MwQ5bhbm2POE2V9BPQ.woff2" ],
"matches": [ "https://fonts.gstatic.com/*" ]
}
]
Here's one workaround for my problem that actually gives me the result I'm looking for by storing the content of the remote CSS file into a string first. It's a bit hacky and relies on jQuery. Would still like to find a better way.
$.ajax
({
type:'GET',
url:'https://fonts.googleapis.com/css2?family=Acme',
success: function(fontCss)
{
chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
{
var activeTab = tabs[0];
var customCss = 'body{font-family:Acme !important;}';
var fullCss = fontCss + customCss;
chrome.scripting.insertCSS
({
target: { tabId: activeTab.id },
css: fullCss
});
});
}
});
I'm trying to create a full stack app using Express and ejs, and using webpack to bundle the client side assets. When I set it up without ejs it all works perfectly. The problem has come when I've tried to change the index.html to an index.ejs that uses partials for header, footer etc. Ultimately this will be a multipage app which is why I'm using the ejs templates.
I've tried using ejs-loader (https://www.npmjs.com/package/ejs-loader), ejs-compiled-loader (https://github.com/bazilio91/ejs-compiled-loader) and ejs-html-loader (https://www.npmjs.com/package/ejs-html-loader) without any joy.
Any help would be appreciated. I'm sure it's really straightforward but for the life of me I can't work out how to link up ejs to webpack and get the templates to work.
I've included the code that works with template.html below. I need to know how to change that to use index.ejs?
My file structure looks like this:
--dist (output from webpack)
--src (containing index.ejs)
----partials (containing partials for index.ejs)
app.js
webpack.common.js
webpack.dev.js
webpack.prod.js
package.json
etc.
Index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<% include partials/head %>
</head>
<body>
<main>
<% include partials/main %>
</main>
<% include partials/footer %>
</body>
</html>
And my config files look as follows (I've only included the two that merge to make the build congfig):
webpack.common.js
const path = require("path")
module.exports = {
entry: {
main: "./src/index.js",
vendor: "./src/vendor.js"
},
module: {
rules: [
{
test: /\.html$/,
use: ["html-loader"]
},
{
test: /\.(svg|png|jpg|gif)$/,
use: {
loader: "file-loader",
options: {
name: "[name].[hash].[ext]",
outputPath: "imgs"
}
}
}
]
},
}
webpack.prod.js
const path = require("path")
const common = require("./webpack.common")
const merge = require("webpack-merge")
const {
CleanWebpackPlugin
} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = merge(common, {
mode: "production",
output: {
filename: "[name].[contentHash].js",
path: path.resolve(__dirname, "dist")
},
optimization: {
minimizer: [
new OptimizeCssAssetsPlugin(),
new TerserPlugin(),
new HtmlWebpackPlugin({
template: "./src/template.html",
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
removeComments: true,
}
})]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].[contentHash].css",
}),
new CleanWebpackPlugin(),
],
module: {
rules: [{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
}]
}
});
This is my first post, if I've not included anything crucial please let me know!
Thanks!
I'm new to webpack and want to use html-critical-webpack-plugin in my vue.config.js file which is created by vue-cli3. But I get this error while using const path= require('path') in my vue.config.js file. I don't see any webpack.config.js file in my root folder. How do I get this working in vue.config.js file?
const path = require('path')
const HtmlCriticalPlugin = require("html-critical-webpack-plugin");
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
module.exports = {
configureWebpack: {
optimization: {
splitChunks: {
chunks: 'all',
},
},
plugins: [
new VuetifyLoaderPlugin(),
new HtmlCriticalPlugin({
base: path.join(path.resolve(__dirname), 'dist/'),
src: 'index.html',
dest: 'index.html',
inline: true,
minify: true,
extract: true,
width: 375,
height: 565,
penthouse: {
blockJSRequests: false,
}
})
]
},
devServer: {
disableHostCheck: true,
},
lintOnSave: false,
pwa: {
// configure the workbox plugin
workboxPluginMode: 'InjectManifest',
workboxOptions: {
// swSrc is required in InjectManifest mode.
swSrc: 'src/service-worker.js'
}
}
}
I am trying to load external URL into modal AlloyUI dialog in Liferay Portal. If I open dialog at the first time the contents are showing but at the second time the contents are not showing. If refresh the page its showing.
This is my function:
Liferay.provide(
window,
'openModal',
function(title, url) {
var A = AUI();
var width = 800;
var modal = Liferay.Util.Window.getWindow({
dialog: {
centered: true,
constrain2view: true,
modal: true,
resizable: false,
height: 650,
width: width,
//destroyOnClose: true,
destroyOnHide: true,
toolbars: {
footer: [
{
label: 'Close',
cssClass: 'btn-link pull-right',
on: {
click: function() {
modal.hide();
}
}
}
]
}
},
closeOnOutsideClick: true,
id:'test-dialog',
title: title
}).plug(A.Plugin.IO, {
uri: url,
on: {
success: function(event) {
console.log("success");
},
complete: function(event) {
console.log("complete");
},
start: function(event) {
console.log("start");
},
failure: function(event) {
console.log("failure");
}
}
}).render();
}
);
The function is used in this link:
Open dialog
When I open dialog at the second time I get this error:
Cannot read property 'Window' of undefined
Resolved by using A.Plugin.DialogIframe module insted of A.Plugin.IO