———————————————————————————
Trying to use requirejs with easeljs …. this works!
<head>
<title>Trial Run</title>
<link rel="stylesheet" type="text/css" href="mainStyle.css">
<script src="http://code.createjs.com/1.0.0/easeljs.min.js"></script>
<script src="http://code.createjs.com/1.0.0/tweenjs.min.js"></script>
<script data-main="js/app" src="js/lib/require.js"></script>
</head>
———————————————————————————
When I remove the underlined code and setup the ’requirejs.config’ (below),
it fails with … ‘app.html:51 Uncaught ReferenceError: createjs is not defined’
requirejs.config({
"baseUrl": "js/lib",
"paths": {
"app": "../app",
"easel": "//code.createjs.com/1.0.0/easeljs.min.js",
"tween": "//code.createjs.com/1.0.0/tweenjs.min.js"
},
"shim": {
"jquery.alpha": ["jquery"],
"jquery.beta": ["jquery"],
"easel": {
exports: 'createjs'
},
"tween": {
deps: ["easel"],
exports: "Tween"
}
}
});
// Load the main app module to start the app
requirejs(["app/main"]);
———————————————————————————
Picture of File arrangement
———————————————————————————
Syntax is wrong, this works !
requirejs.config({
"baseUrl": "js/lib",
"paths": {
"app": "../app",
"easel": 'easeljs.min',
"tween": 'tweenjs.min'
},
"shim": {
"jquery.alpha": ["jquery"],
"jquery.beta": ["jquery"],
easel: {
exports: 'createjs'
},
tween: {
deps: ['easel'],
exports: 'tween'
}
}
});
// Load the main app module to start the app
requirejs(["app/main"]);
Related
I like using Tailwind CSS in my React and Laravel projects.
Now I've started learning NestJS and I want to use Tailwind CSS in my project, but I couldn't.
Since I couldn't find any results on Google, I'm asking you guys.
I would be grateful for any resource or your detailed answer.
The current state of my project is as follows. I don't know where I went wrong, TailwindCSS is not working.
Please note that I am just starting to learn NestJS.
main.ts
import { NestFactory } from '#nestjs/core';
import { NestExpressApplication } from '#nestjs/platform-express';
import { join } from 'path';
import { AppModule } from './app.module';
async function bootstrap() {
const app = await NestFactory.create<NestExpressApplication>(AppModule);
app.useStaticAssets(join(__dirname, '..', 'public'));
app.setBaseViewsDir(join(__dirname, '..', 'views'));
app.setViewEngine('hbs');
await app.listen(3000);
console.log(`Application is running on: ${await app.getUrl()}`);
}
bootstrap();
app.controller.ts
import { Controller, Get, Render } from '#nestjs/common';
#Controller()
export class AppController {
#Get()
#Render('index')
root() {
return { message: 'Hello world!' };
}
}
app.module.ts
import { Module } from '#nestjs/common';
import { AppController } from './app.controller';
#Module({
imports: [],
controllers: [AppController],
providers: [],
})
export class AppModule {}
tailwind.config.js
module.exports = {
content: ['./views/*.hbs', './views/**/*.hbs'],
theme: {
extend: {},
},
plugins: [],
};
webpack-hmr.config.js
const nodeExternals = require('webpack-node-externals');
const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');
module.exports = function (options, webpack) {
return {
...options,
//entry: ['webpack/hot/poll?100', options.entry],
entry: './src/main.ts',
externals: [
nodeExternals({
allowlist: ['webpack/hot/poll?100'],
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true,
},
},
],
},
{
test: /\.ts$/,
use: [{ loader: 'ts-loader' }],
},
],
},
plugins: [
...options.plugins,
new webpack.HotModuleReplacementPlugin(),
new webpack.WatchIgnorePlugin({
paths: [/\.js$/, /\.d\.ts$/],
}),
new RunScriptWebpackPlugin({ name: options.output.filename }),
],
};
};
index.hbs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>NestJS App With TailwindCSS</title>
<link rel="stylesheet" href="/assets/css/tailwind.css">
</head>
<body>
<header class="w-full px-8 text-gray-700 bg-white flex">
<h1 class="bg-slate-200">
{{ message }}
</h1>
</header>
</body>
</html>
and script command
"start:dev": "nest build --webpack --webpackPath webpack-hmr.config.js --watch",
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'
]
}
Hello I use requirejs in Moodle 3.5 to include js files, but I have a problem with Tempus Dominus Bootstrap 4.
Here is my config.js
define([], function () {
window.requirejs.config({
paths: {
"moment": 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min',
"datetimepicker":'https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min',
},
shim: {
'datetimepicker': {deps: ['jquery','moment'], exports: 'datetimepicker'},
}
});
});
datetimepicker.js
define(['myfolder/config', 'datetimepicker'], function(unused,datetimepicker) {
return datetimepicker;
}
);
myapp.js
define([
'jquery',
'myfolder/moment',
'myfolder/datetimepicker',
],
function ($,moment) {
function initManage() {
And it throws the error: "No define call for datetimepicker";
What is wrong?
The shim has to be:
datetimepicker: { exports: "$.fn.datetimepicker" }
Here are the files:
config.js
define([], function () {
window.requirejs.config({
paths: {
"moment": M.cfg.wwwroot + '/admin/tool/myplugin/js/moment.min',
"moment-fr": M.cfg.wwwroot + '/admin/tool/myplugin/js/moment-fr',
"bootstrap": M.cfg.wwwroot + '/admin/tool/myplugin/js/bootstrap.bundle.min',
"datetimepicker":M.cfg.wwwroot + '/admin/tool/myplugin/js/tempusdominus-bootstrap-4',
},
shim: {
bootstrap: { deps: ["jquery"], exports: 'bootstrap'},
datetimepicker: { exports: "$.fn.datetimepicker" }
}
});
});
datetimepicker.js
define(['tool_myplugin/config', 'datetimepicker'], function(unused,datetimepicker) {
return datetimepicker;
});
And app.js
define([
'jquery',
'tool_myplugin/moment',
'tool_myplugin/bootstrap',
'tool_myplugin/datetimepicker'
],
function ($,moment) {
function initManage() {
$(document).ready(function () {
$('#datetimepicker1').datetimepicker({
format: 'HH:mm',
use24hours: true,
defaultDate: moment({hour: 9,minute:0})
});
...
I want to be able to use import in my react application for not only js/jsx files but also for css files. From what I've read, the best way to do that is to use the extract-text-webpack-plugin which will take your imported css files and bundle them together.
I've set it up so that its generating my bundled css file, but for some reason every time I load my page I get a syntax error:
SyntaxError: MyWebpage/views/global.css: Unexpected token, expected ; (1:5)
> 1 | body {
| ^
2 | margin: 0;
3 | }
My setup looks like this:
webpack.config.js
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const config = {
entry: ['babel-polyfill', './views/Index.jsx'],
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/public'
},
module: {
rules: [
{ test: /\.(jsx|js)$/, exclude: /node_modules/ , use: 'babel-loader' },
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
};
module.exports = config;
The entry point ./views/Index.js is where I'm importing my css file:
Index.js
import React from 'react';
import Layout from './Layout.jsx';
import PageContent from './PageContent.jsx';
import './global.css';
class Index extends React.Component {
render() {
return (
<Layout title={this.props.title}>
<PageContent />
</Layout>
);
}
}
export default Index;
Inside the imported ./Layout.jsx file I'm using a <link> to include the bundled css file in my page:
Layout.jsx
import React from 'react';
class Layout extends React.Component {
render() {
return (
<html>
<head>
<title>{this.props.title}</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root">
{this.props.children}
</div>
<script type="text/javascript" src="./bundle.js"></script>
</body>
</html>
);
}
}
export default Layout;
I'm pretty confused because it seems like my app is building fine, but when I try to access my webpage I keep getting a syntax error.
Can anyone please help me understand what I'm doing wrong?
It seems problem with loaders below is example of webpack.config.js file working for jsx and css loaders :
module.exports = {
entry: './app/index.js',
output: {
path: __dirname,
filename: 'dist/bundle.js'
},
devServer: {
inline: true,
port: 3000
},
module: {
loaders: [{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react', 'react-hmre']
}
},
{
test: /\.scss$/,
loaders: [ 'style', 'css', 'sass' ]
}]
}
};
it seems like babel or webpack is not loading the loaders.
This variant helps me with it (just include into webpack.config.js):
require.extensions['.css'] = () => {
return;
};
More here... [link]
I have been working with Require.JS and SignalR over the past few days and I noticed that when I load my site sometimes the SignalR/Hubs seems to get loaded before jquery despite my require.js configuration appearing to be correct.
Here's my config:
require.config({
paths: {
jQuery: 'libs/jquery/jquery',
Underscore: 'libs/underscore/underscore',
Backbone: 'libs/backbone/backbone',
Marionette: 'libs/backbone/backbone.marionette'
}
});
require([
'app',
'order!libs/jquery/jquery-min',
'order!libs/jQueryUI/jquery-ui-1.8.11.min',
'order!libs/jqGrid/grid.locale-en',
'order!libs/jqGrid/jquery.jqGrid.min',
'order!libs/underscore/underscore-min',
'order!libs/backbone/backbone-min',
'order!Marionette',
'order!libs/jquery.signalR-0.5.1',
'order!noext!signalr/hubs'
], function (app) {
app.initialize();
});
When this fails I get an error on line 16 of the hubs file. It says uncaught TypeError: Cannot read property 'signalR' of undefined.
Upgraded to V2 and modified my config.
var fRequire = require.config({
paths: {
jQuery: 'libs/jquery/jquery',
Underscore: 'libs/underscore/underscore',
Backbone: 'libs/backbone/backbone',
Marionette: 'libs/backbone/backbone.marionette',
sigr: 'libs/jquery.signalR-0.5.1'
},
shims: {
"libs/jquery.signalR-0.5.1": {
deps: ["jQuery"]
},
"libs/jqGrid/jquery.jqGrid.min": {
deps: ["jQuery"]
},
"libs/jquery/jquery-ui-1.8.19.min": {
deps: ["jQuery"]
},
"libs/jqGrid/grid.locale-en": {
deps: ["jQuery"]
},
"noext!signalr/hubs": {
deps: ["sigr"]
}
}
});
fRequire([
'app'
], function (app) {
app.initialize();
});
Now require is looking in the wrong locations for jquery, underscore, etc...despite my telling it specifically where to look. Perhaps this has something to do with me following an old tutorial when I configured require using v1.
http://backbonetutorials.com/organizing-backbone-using-modules/
FINAL UPDATE:
Here is my working config. Hopefully it'll help any newbies like myself get passed this issue.
require.config({
baseUrl: '/js',
paths: {
"jquery": 'libs/jquery/jquery-min',
"underscore": 'libs/underscore/underscore-min',
"backbone": 'libs/backbone/backbone-min',
"marionette": 'libs/backbone/backbone.marionette',
"sigr": 'libs/jquery.signalR-0.5.1'
},
shims: {
"backbone": {
deps: ["underscore", "jquery"],
exports: "Backbone"
},
"underscore": {
deps: ["jquery"]
},
"marionette": {
deps: ["backbone", "jquery"]
},
"sigr": {
deps: ["jquery"]
},
"libs/jqGrid/jquery.jqGrid.min": {
deps: ["jquery"]
},
"libs/jquery/jquery-ui-1.8.19.min": {
deps: ["jquery"]
},
"libs/jqGrid/grid.locale-en": {
deps: ["jquery"]
},
"noext!signalr/hubs": {
deps: ["sigr"]
}
}
});
// for future ref, I loaded jquery here because app.js references sigr which requires it.
// without enabling it before the module is loaded sigr would complain jquery was not enabled.
require([
'libs/domReady',
'app',
'jquery'
], function (domReady, app, $) {
domReady(function () {
app.initialize();
});
});
It was mandatory that I load jquery in the function(domready, app, $). Failing to do so will result in signalr reporting that it cannot be found.
If you're using requirejs 2.x you can use the "shims" config attribute. There you can specify the dependencies between files that are not AMD compliant, like jquery, jqueryui, etc..
Using your configuration as example:
require.config({
paths: {
jQuery: 'libs/jquery/jquery',
Underscore: 'libs/underscore/underscore',
Backbone: 'libs/backbone/backbone',
Marionette: 'libs/backbone/backbone.marionette'
},
// specify depedencies
shim: {
"libs/jquery.signalR-0.5.1" : {
deps: ["jQuery"]
},
"libs/jqGrid/jquery.jqGrid.min" : {
deps: ["jQuery"]
}
}
});
Also, configure the dependencies in "shims" eliminates the use of the "order!" plugin.
Tip: Use "paths" to set a friendly name for apis that your system use, so when a new version of that api is released you can just change in "paths" and you're done.
Just to follow up on the answer provided and why you are still having to pre-include jQuery... the config setting for require is "shim", not "shims". Require won't recognize and preload the dependencies specified without the correct spelling of the config setting. I got hammered by this recently and posted about it: http://mikeycooper.blogspot.com/2013/01/requirejs-20-dependencies-seemingly.html