I am looking at adding a new javascript library to drupal 8. I want the ability to call this library from other modules / libraries.
The way WordPress does this is by the use of wp_enqueue_scripts. Using a common library would make sure that my library is loading just once.
An existing implementation of this in drupal is the way you can add dependencies into your the yml files
js:
dependencies:
- core/jquery
Is there a way I can add my own javascript library as the dependency that can be used throughout my drupal instance (all modules and themes should be able to use this as a dependency)
If you want to add any custom code, you need to create and enable your custom module or theme, where you can define your custom javascript file in the my_module.libraries.yml file, like this:
my_library:
js:
dist/js/my_stuff.js: {}
dependencies:
- core/jquery
In this case, your custom code is placed in de dist/js folder.
Then you should add your library to Drupal. I usually use the my_module.info.yml to define my custom libraries in this way:
libraries:
- my_module/my_library
You can also use your custom library as a dependency:
my_other_library:
js:
dist/js/my_other_stuff.js: {}
dependencies:
- core/jquery
- my_module/my_library
More info about attaching libraries:
https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-module
More info about *.info.yml file:
https://www.drupal.org/docs/8/theming-drupal-8/defining-a-theme-with-an-infoyml-file
Related
I'm currently building a minimalist app following this CMake architecture:
-root
--QmlModule
---Component1.qml
---Component2.qml
--App1
---main.cpp
---main.qml
--App2
---main.cpp
---main.qml
I use "qt6_add_qml_module" to create a QML module at "QmlModule" level as a STATIC library.
qt_add_library(myComponentTarget STATIC)
qt6_add_qml_module(myComponentTarget
URI QmlModule
VERSION 1.0
QML_FILES
Component1.qml
Component2.qml
RESOURCES
logo.png)
Then, at App1 (and App2) level, a link to the module is done using "target_link_libraries". "qt6_add_qml_module" does some work behind the scenes in order to expose the module trough an automatically generated plugin named "your_component_URIplugin". More details about this here.
add_executable(App1Exe
main.cpp)
qt6_add_qml_module(App1Exe
URI App1
VERSION 1.0
QML_FILES
main.qml)
target_link_libraries(App1Exe
PRIVATE
myComponentURIplugin)
At Root level, I overload QML_IMPORT_PATH in order to link to the build folder and add all subdirectories.
set(QML_IMPORT_PATH ${CMAKE_CURRENT_SOURCE_DIR}/qmlModule)
add_subdirectory(QmlModule)
add_subdirectory(App1)
add_subdirectory(App2)
I run CMake without any errors, and open App1/main.qml file.
On my import QmlModule, the module can't be found:
module "lupinComponentsplugin" is not installed
How to make my module visible from my Apps ?
What step am I missing ?
I'm currently doing something similar.
I have created a demo app where I import modules. The modules provide QML and C++ items to the main app. Check the comments in the CMAKE files to find out how this works.
Here is the link:
https://gitlab.com/basic53/DemoApp
Feel free to comment on this.
Another tip: If qt_add_qml_module is not working properly, sometimes it is necessary to remove the whole build folder and update the QML code model. You can check the generated files to see, if your plugin has been created with all its types.
CMake itself was fine, this was a runtime error and not a link error.
This issue was raised because the QQmlApplicationEngine wasn't finding path towards my module's QMLDIR.
In the end, the only thing missing was an additional import path ":/" in QQmlEngine:
QQmlApplicationEngine engine;
engine.addImportPath(":/");
I'm working on an Ember.js project and would like to leverage the Slick Carousel library. I've installed the library via Bower in my project folder, and am having difficulty with importing it into my project.
In my ember-cli-build.js, I've added import statements as follows:
app.import('bower_components/slick-carousel/slick/slick.css');
app.import('bower_components/slick-carousel/slick/slick-theme.css');
app.import('bower_components/slick-carousel/slick/slick.js');
The issue I am running into is that the rest of the required assets do not get built and included in the dist folder when I do a build (fonts, assets, etc.), leading to errors with missing fonts and assets that are present in the "bower_components/slick-carousel" folder, but not in the build of my actual Ember application.
Edit: It looks like Broccoli-Funnel was what I needed. The issue was resolved by specifying the source files from the 'bower_components' folder and pointing the relative path to the 'dist' folder in the ember-cli-build.js file.
As a note: The 'broccoli-static-compiler' plugin commonly referenced elsewhere as the solution is deprecated, with the use of 'broccoli-funnel' as the recommended plugin.
Broccoli-funnel ended up being what I was looking for. By placing the following inside of ember-cli-build.js, the needed files would be placed in the correct directory during build:
var Funnel = require('broccoli-funnel');
var requiredAssets = new Funnel('bower_components/slick-carousel/slick/fonts', {
srcDir: '/',
include: ['**/*.*'],
destDir: '/assets/fonts'
});
return app.toTree([requiredAssets]);
I'm writing an Ember.js application using Ember Cli, and I want to include a non-bower dependency - basically a dependency from my vendor folder.
The instructions on doing so is telling me to add the following line into my ember-cli-build.js file:
app.import('vendor/dependency-to-include.js');
That would work fine with a normal ES5 flavored dependency, but what if I want to add a dependency written in ES6?
Right now it just delivers it to the browser untouched, which produces an error like:
Uncaught SyntaxError: Unexpected reserved word
because my ES6 flavored dependency uses the following syntax:
import Util from './util
I'm guessing that I need to tell ember-cli-build to transpile this particular dependency before passing it on to the browser, but how do I go about doing that?
Thanks
For transpiling imported dependencies you need to run the imported file(s) through the broccoli addon broccoli-babel-transpiler. For a basic example, checkout this file: https://github.com/thefrontside/ember-impagination/blob/2fa38d26ef1b27a3db7df109faa872db243e5e4c/index.js. You can adapt this addon to an in-repo addon for your project.
See this link for the background discussion and #rwjblue and #cowboyd on the actual fix: https://github.com/ember-cli/ember-cli/issues/2949
Are you currently including Babel within your project? I would have thought that it checks your vendor directory the same as it does everything else and converts the ES6 code to ES5.
The other option would be to just convert the file to ES5 manually whenever you need to include a vendor file with ES6 syntax. Not necessarily ideal, but if it's a static file then it's something you'll need to do once and then forget about.
I have an aura.js project which as part of the documentation, to load extensions you specify the path with require js. Here is an example of an extension:
define ["pace"], ($) ->
(app) ->
require:
paths:
morris: 'bower_components/morris.js/morris'
raphael: 'bower_components/raphael/raphael'
shim:
morris:
deps: ['jquery','raphael']
initialize: (app) ->
Morris = require "morris"
Pace = require "pace"
Pace.start()
My issue is that after I build the project and include all the dependencies into app.js which is the entry point for require, I can see the network requests and the app.js file is loaded but then require continues to pull down all the unoptimized modules (i.e. bower_components/morris.js/morris).
This results in a double request for each module which of course is unnecessary. Ideas?
The build file had an error in it as the moment-range library couldn't find moment to attach itself to.
As a result, it was blowing out of the loading of the app.js file and forcing require to use the unoptimized versions of the libraries.
I've successfully configured and run HMVC on my clean install of Codeigniter 2.1.0
Then I've included Template library. It consist of only 3 files: /system/library/Template.php, /application/config/template.php and finally, template file itself (somewhere in /views directory).
I've tested template library while loading one of my created modules. I had to go to /system/library/Template.php to correct paths so they point to my module/views instead of default CI's ones.
Then I tested and it seemed just fine.
The third step is to include Tank_Auth authentication library. I want it to reside in module as well (/modules/auth). This module should have the same directory structure just like a regular app directory does (config, controllers, language, libraries, models, views, etc.) so I can copy Tank_Auth's files to Auth module's respective directories.
Basically, I have already done that copy part. But now when I try to run http://adresar.local/auth/auth/login I get
An Error Was Encountered
Unable to load the requested file: auth/login.php
I've also tried changing
class Auth extends CI_Controller
to
class Auth extends MX_Controller
but to no avail.
If anyone can throw in some useful advice I will appreciate it a lot.