I'm trying to create a custom element in Svelte Kit like so <svelte:options tag="my-element" /> in the docs is a line saying that you have to add this line customElemet:true but where? Svelte Kit doesn't have rollup.config.js with plugins but svelte.config.js without plugins.
Do you know where to add it in Svelte Kit?
Inside the svelte.config.js you can add the key compilerOptions to the config object. Inside that key create a new object that sets the key customElement with the value true, i.e.:
// svelte.config.js
// imports ...
/** #type {import('#sveltejs/kit').Config} */
const config = {
compilerOptions: {
customElement: true
// other compiler options ...
},
kit: {
adapter: adapter(),
// other kit options ...
},
// other config options ...
};
export default config;
Related
I am trying to add storybook.js into my react project and there is a pre-requisite script I need to add to every storybook page so as to render some custom components.
The script's URL needs to be auto generated on the fly in webpack configuration.
This Story rendering section of storybook's documentation mentioned a preview-head.html through which script tags can be injected into the final index HTML file.
I am wondering whether it supports EJS syntax like below for me to access a config option value of the HtmlWebpackPlugin.
<script src="<%= htmlWebpackPlugin.options.foobar %>"></script>
As a workaround, I wrote a decorator in the preview.js file to purposely insert the <script /> tag into the storybook iframe with dynamically generated src field.
const loadAssets = () => {
const scriptElement = document.createElement('script');
// scriptElement.src = /* dynamically generated from dependencies */;
document.querySelector('head').appendChild(scriptElement);
};
const AssetLoader = props => {
React.useEffect(() => loadAssets(), []);
return <>{props.children}</>;
};
const assetLoaderDecorator = storyFn => (
<AssetLoader>{storyFn()}</AssetLoader>
);
addDecorator(assetLoaderDecorator);
It's a bit clumsy but it serves the purpose at the moment.
Inspired by https://github.com/jhta/storybook-external-links.
I am using stylelint within a CSS-IN-JS project (here using astroturf, but I face the same pattern using any CSS-IN-JS library such as styled-components as well).
I define different styled elements within the same file, and therefore sometimes end up having duplicated selectors and/or import rules.
/* style.js */
import styled from 'astroturf';
export const StyledComponentA = styled('div')`
transform: scale(0);
&.visible {
transform: scale(1);
}
`;
export const StyledComponentB = styled('div')`
opacity: 0;
/* -> stylelint error: Unexpected duplicate selector "&.visible" */
&.visible {
opacity: 1;
}
`;
Which I compose this way:
import React from 'react';
import { StyledComponentA, StyledComponentB } from './style';
export const Component = ({ isVisible }) => (
<StyledComponentA visible={isVisible}>
<StyledComponentB visible={isVisible}>Whatever</StyledComponentB>
</StyledComponentA>
);
Is there a way to set these stylelint rules on blocks instead of an entire file?
Is there a way to set these stylelint rules on blocks instead of an entire file?
There is not.
Rules like no-duplicate-selectors are scoped to a source and stylelint treats the following as sources:
entire files
code passed to the code option of the node API
stdin passed to the CLI
When writing CSS-in-JS, it might be advisable to turn off the rules scoped to sources. You can turn them off:
entirely in your configuration object e.g. "no-duplicate-selectors": null
on a case-by-case basis using command comments
I realize that it is recommended to make a .babelrc file to run tests with Jest according to their docs. But is there any way I could load the babelrc config programmatically and therefore not have to create this file for every React project that I have? Also, I realize I could put something in my package.json file, but I don't want to have to do that either.
You can take advantage of Jest's scriptPreprocessor config setting. I created a file that looked like this and it worked:
const babel = require('babel-core')
const jestPreset = require('babel-preset-jest')
module.exports = {
process: function (src) {
const transformCfg = {
presets: ['es2015', 'react', 'stage-0', jestPreset],
retainLines: true
}
return babel.transform(src, transformCfg).code
}
}
I am working on Episerver 9. I have a requirement where user can copy content (which includes HTML tags) into the TinyMCE editor.
I want only the text content to be pasted. HTML tags should be filtered out automatically by default.
Is there any way to achieve this using TinyMCE?
You can register a custom TinyMCE plugin in Episerver using the TinyMCEPluginNonVisual attribute. By setting AlwaysEnabled to false, you can use property settings to determine whether the plugin should be enabled or not for a specific editor/XHTML property.
[TinyMCEPluginNonVisual(AlwaysEnabled = false, PlugInName = "customplugin")]
public class MyCustomPlugin
{
}
Your actual TinyMCE plugin (i.e. JavaScript code) could be something like the following:
(function (tinymce, $) {
tinymce.create('tinymce.plugins.customplugin', {
init: function (editor, url) {
editor.onPaste.add(function (editor, event) {
if (!event.clipboardData || !event.clipboardData.items) {
return;
}
// TODO Modify event.clipboardData, for example to strip out HTML tags
});
}
});
// Register plugin
tinymce.PluginManager.add('customplugin', tinymce.plugins.customplugin);
}(tinymce, epiJQuery));
While this isn't a complete example, it should get you started in the right direction.
You should also have a look at the official documentation.
Edit: If you just want to alter the paste_as_text setting, you could register a plugin and set the configuration through the TinyMCEPluginNonVisual attribute:
[TinyMCEPluginNonVisual(EditorInitConfigurationOptions = "{ paste_as_text: true }")]
public class PasteAsTextPlugin
{
}
Assuming that you are loading the paste plugin you can force TinyMCE to always paste as plain text with the following:
tinymce.init({
...
plugins: "paste",
paste_as_text: true
...
});
https://www.tinymce.com/docs/plugins/paste/#paste_as_text
I would assume that Episerver provides you some way to manipulate the configuration of TinyMCE. Adding the paste_as_text option to that configuration should do what you need.
Not sure how to set options for the Stylus CSS pre processor. A search of all the files reveals this:
node_modules/broccoli-stylus-single/node_modules/.bin/stylus [98]:
node_modules/broccoli-stylus-single/node_modules/stylus/bin/stylus [98]:
/**
* Include CSS on import.
*/
var includeCSS = false;
Does anyone know the correct/preferred way to set this option to 'true' in Ember-CLI framework / Broccoli build system?
Many thanks!
It appears that this maps to "include css": true in the options map (source):
var Compiler = module.exports = function Compiler(root, options) {
// ...
this.includeCSS = options['include css'];
// ...
};
I've tested this with ember-cli-stylus and it appears to work.