I've added Snowpack 3 to my application and it works for JS/TS files as well as directly imported stylus files.
The file structure is similar to the following:
view.js:
import 'view-styles.styl'
export default function view() {
return (
<div className='example-view'>Hello World</div>
);
}
view-styles.styl
#require './colors.styl'
.example-view
background-color: $mainColor
colors.styl
$mainColor = #ff0000
The LiveReload/HMR works as expected when changing the directly imported stylus file. It does not work when changing anything in the colors.styl file. Changes in this file are only picked up once the view-styles.styl file is updated.
Is this a known limitation of Snowpack?
I would also be ok to trigger the update manually, as I have a way to identify these files using their filenames. I haven't found a way yet to trigger live reloads using Snowpack's JavaScript API. I was able to load the file using the SnowpackDevServer.loadUrl function, but that doesn't help either.
I was able to contribute this to the snowpack stylus plugin. The change was already integrated into the plugin: https://github.com/fansenze/snowpack-plugin-stylus
Related
I am using filestack-react package in my CRA app. I can't find any option to upload multiple files the same time. Documentation doesn't say much about it.
Any ideas?
I have solved this using a property called actionOptions within the React Filestack component. See reference here:
https://github.com/filestack/filestack-react (Scroll down to 'Props')
I have passed to this prop an object called "PickerOptions", which is setting the number of maximum files uploaded at once. By default the filepicker has this number set to 1, but you can change that using "maxFiles: number"
You can find available options for {PickerOptions} here:
https://filestack.github.io/filestack-js/interfaces/pickeroptions.html#maxfiles
So my code looks like this:
const PickerOptions = {
maxFiles: 15
};
<ReactFilestack
apikey={FILESTACK_API_KEY}
actionOptions={PickerOptions}
/>
I am currently working on a React + Redux Project and wanted to use language messages to render an image.
The problem is that, because the image name is dynamic (because of the language switching), I can't use require(imageVar) to load the image.
What I currently am working with is this (this is inside of the render() function):
FormattedMessage {...messages.fullLogo}>
{
(fullLogo) => <Img src={require(`${fullLogo}`)} alt="Banner" />
}
</FormattedMessage>
This should theoretically load the image from the url (yes fullLogo is a full url to the image).
What I tried inside of src={} was:
require(`${fullLogo}`)
require(fullLogo)
require("" + fullLogo)
require(String(fullLogo))
require(fullLogo.toString())
Everytime I try one of these (except the 3rd one - gives me an fatal error) I get an "Could not Load Module './img/image.png'" error.
I guess this means, that the name does load but require somehow cannot access the variable.
However if i put the path directly into the require() function. It successfully loads the image.
I don't want this though. I want it to load it dynamically.
Maybe you guys have some experience with it.
Thanks in advance!
PS: If you need any extra code, let me know!
You can't dynamically require files by variable at runtime, since require happens before runtime, when you bundle your app together (e.g. using webpack).
Based on how the packager works, this isn't really possible with require.
Packaging happens once before runtime so those variables don't have values yet.
What do you mean by langage switching ? What does message.fullLogo contains ? If it contains an url, just use that url without require:
Drupal 7 with TinyMCE included via the Wysiwyg module. "Paste" is enabled in the Wysiwyg config screen. The editor is in general working fine, but now I'm attempting to modify TinyMCE's paste feature to strip all attributes from HTML tags. (Client requirement, don't ask.)
Have added the following to the module file:
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
if ($context['profile']->editor == 'tinymce') {
drupal_add_js(drupal_get_path('module', 'MYMODULE').'/js/tinymce_callbacks.js');
$settings['paste_preprocess'] = 'MYMODULE_tinymce_paste_preprocess_callback';
}
}
and have created tinymce_callbacks.js with the following contents:
function MYMODULE_tinymce_paste_preprocess_callback(pl, o) {
alert(o.content);
o.content = "-: CLEANED :-\n" + o.content;
}
The actual TinyMCE paste button only works with IE, but the ctrl-V shortcut works with every browser. However, the callback is not called.
I did some digging around. The paste_preprocess setting is definitely being added to the correct JavaScript object, but the only code that references it -- the TinyMCE Paste plugin -- isn't being loaded. So it looks like the problem is with Drupal, not TinyMCE.
Any help getting Drupal to load TinyMCE plugins correctly would be most appreciated.
Make sure that the "paste" TinyMCE plugin is actually being loaded. For some reason, in Drupal there is an entry under "Buttons and Plugins" titled simply "Paste". This however does NOT enable the "paste" plugin required for the paste preprocess callback to occur.
Instead, make sure either "Paste Text" or "Paste from Word" is enabled. This should cause the "paste" plugin to load, and the paste preprocess callback to occur.
I understand that requirejs and browserify can load my files dependent on its current context, and that it is amazing. I would really prefer to use the #section sections syntax that the razor engine uses. Was just wondering if there is a way to implement this into a typescript / angularjs application.
for example
index.html
#renderSection scripts;
// which could turn into something like
<script data-render="scripts"></scripts>
// the app.run() could declare all the scripts that will be needed on every
// page view
view.html
<script ng-section-repeat="injected in injection"></script>
// the ng-section-repeat is basically taking all the items in the
// typescript constructor and then finding out which ones are needed for
// that view.
I like the idea injecting application file dependencies in the view , without a configuration file and all the added extras that comes with the loaders.
I just want to easily define what files are needed in the actual view and get them loaded, with angular's dependency injection handling the dependency itself.
If you are handling all your dependencies with $inject then , as far as i can tell, dependency is technically already setup in the controllers, all one would need, is to load this as it is called. Which could even eliminate the need for the #section scripts completely
Update:
What i have done to sort of replicate the module loaders is to just use gulp-concat and define the file order in my gulp.config.js and then pass it to the gulp-src before running $.concat .this allows me to have the files in the gulp steam , in dependent order . They are however loaded on the first load. With gulp-uglify the files are tiny ( its now at 566Kb with 16 external libraries loading in 69ms . To put that into perspective it takes 209ms to load one google font ).
I dont know maybe i am not understanding browserify correctly but i honestly struggle to see the need for it, its seems extremely convoluted for something so simple
It is possible using external modules and an injector to do what you asked for:
I just want to easily define what files are needed in the actual view
import {UserFactory} from 'models/userFactory';
import {UserValidator} from 'models/userValidator';
import {Inject} from 'angular2/di';
and get them loaded, with angular's dependency injection handling the dependency itself.
Note: My example uses angular 2.x because I less familiar with angular 1.x and I'm sure you can do something really similar...
class SomeComponent {
userName: string;
userRating: number;
rating: number;
constructor(
#Inject(UserFactory) UserFactory
#Inject(UserValidator) UserValidator
)
{
this.UserFactory = UserFactory;
this.UserValidator = UserValidator;
}
}
Then you can use Browserify to create a bundle.js file that can be executed in a web browser.
I have problem when I want to use $javascript->link('prototype') in the default.ctp layout. It returns:
Undefined variable: javascript [APP\views\layouts\default.ctp, line 6]
I also added this code into app_controller.php:
<?
class AppController extends Controller {
var $Helpers = array('Html','Javascript','Ajax','Form');
}
?>
The file prototype.js is already in webroot/js folder.
Where is the problem?
I have had this problem many times. It's usually either caused by the controller code being overwritten somewhere or some weirdness happening with Cake's automagic stuff. If you remove all of your helpers and then add them one by one it will probably work eventually.
Another perfectly valid way of generating JavaScript links is by using the following which doesn't access the $javascript variable:
echo $html->script(array('prototype'));
It has to be $helpers instead of $Helpers.
You just open the error console of the Firefox browser (shortcut key ctrl+shift+j).
Find the error and click on it.
After clicking, you will see the head portion.
Note the location of the JavaScript file (*.js) which you want to locate (you will see the location is not correct).
Cut the JavaScript file from webroot and paste it in given location of head block.
Example:
This will show on error console. Map_demo is my project, and in its place your project name will display:
<script type="text/javascript" src="/map_demo/js/test.js"></script>
Cut the JavaScript file from webroot
Make the JavaScript folder in your project application folder, /map_demo/js
Paste test.js (your script file) here
Now your JavaScript function will work.
Just in case somebody else comes across this bug/issue: it was also happening to me, until I commented out the line $session->flash(); in my default layout. Realising that the error was being caused by flash messages, I went back to the controller and noticed that I was using separate layouts for flash messages (e.g. 'message_alert') and that those layouts didn't actually exist in the view folder!
So remember, errors like this could mean that a file is not defined yet. Best of luck.