I've created an Alpine store like the example:
import Alpine from 'alpinejs'
Alpine.store('darkMode', {
on: false,
toggle() {
this.on = ! this.on
}
})
Alpine.start()
Is there a way I can export the store to an external file and import it, as you can do with plugins etc.?
Yes, you can simply create a separate store.js file with the store definition:
import Alpine from 'alpinejs'
Alpine.store('darkMode', {
on: false,
toggle() {
this.on = ! this.on
}
})
And from the main.js (or equivalent) import the store.js file:
import Alpine from 'alpinejs'
import './store.js'
Alpine.start()
(I used Vite for testing.)
Related
I'm using the #casl package to make a permission-based system with Laravel JWT, I'm following this one https://www.npmjs.com/package/#casl/ability
My main.js file.
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { abilitiesPlugin } from '#casl/vue';
import ability from './services/ability';
createApp(App)
.use(abilitiesPlugin, ability, {
useGlobalProperties: true
})
.use(router)
.mount('#app');
The error:
I use Vue 3 togehter with Vuetify 3.0.0.-beta.4 and my src/main.js file looks like this:
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
// --- VUETIFY - START ---
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
const vuetify = createVuetify({
components,
directives,
theme: {
defaultTheme: 'myCustomTheme',
themes: {
myCustomTheme: {
dark: false,
colors: {
background: '#FFFFFF',
surface: '#FFFFFF',
primary: '#6200EE',
'primary-darken-1': '#3700B3',
secondary: '#03DAC6',
'secondary-darken-1': '#018786',
error: '#B00020',
info: '#2196F3',
success: '#4CAF50',
warning: '#FB8C00'
}
}
}
}
})
// --- VUETIFY - END ---
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.use(vuetify)
app.mount('#app')
The code works perfectly fine but as you can see this becomes very quickly confusing. I would like to outsource the Vuetify part form the src/main,js file into a separate file (src/plugins/vuetify.js) but all my efforts didn't work.
How can I outsource the vuetify part into a separate js file?
You can use the export functionality:
https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export
And then, in your main.js file, import your vuetify configured object and pass it to vue.
I tried to modify this repo to customize CKEditor I want to use in my Strapi project. I added a lot more plugins, this is what my ckeditor.js file looks like:
import ClassicEditorBase from '#ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Alignment from '#ckeditor/ckeditor5-alignment/src/alignment.js';
import Autoformat from '#ckeditor/ckeditor5-autoformat/src/autoformat.js';
import BlockQuote from '#ckeditor/ckeditor5-block-quote/src/blockquote.js';
import Bold from '#ckeditor/ckeditor5-basic-styles/src/bold.js';
import CKFinder from '#ckeditor/ckeditor5-ckfinder/src/ckfinder.js';
import CKFinderUploadAdapter from '#ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter.js';
import EasyImage from '#ckeditor/ckeditor5-easy-image/src/easyimage';
import Essentials from '#ckeditor/ckeditor5-essentials/src/essentials';
import FontBackgroundColor from '#ckeditor/ckeditor5-font/src/fontbackgroundcolor.js';
import FontColor from '#ckeditor/ckeditor5-font/src/fontcolor.js';
import FontSize from '#ckeditor/ckeditor5-font/src/fontsize.js';
import FontFamily from '#ckeditor/ckeditor5-font/src/fontfamily.js';
import Heading from '#ckeditor/ckeditor5-heading/src/heading.js';
import HorizontalLine from '#ckeditor/ckeditor5-horizontal-line/src/horizontalline.js';
import Image from '#ckeditor/ckeditor5-image/src/image.js';
import ImageCaption from '#ckeditor/ckeditor5-image/src/imagecaption.js';
import ImageResize from '#ckeditor/ckeditor5-image/src/imageresize.js';
import ImageStyle from '#ckeditor/ckeditor5-image/src/imagestyle.js';
import ImageToolbar from '#ckeditor/ckeditor5-image/src/imagetoolbar.js';
import ImageUpload from '#ckeditor/ckeditor5-image/src/imageupload.js';
import Indent from '#ckeditor/ckeditor5-indent/src/indent.js';
import IndentBlock from '#ckeditor/ckeditor5-indent/src/indentblock.js';
import Italic from '#ckeditor/ckeditor5-basic-styles/src/italic.js';
import Link from '#ckeditor/ckeditor5-link/src/link.js';
import List from '#ckeditor/ckeditor5-list/src/list.js';
import MediaEmbed from '#ckeditor/ckeditor5-media-embed/src/mediaembed.js';
import MediaEmbedToolbar from '#ckeditor/ckeditor5-media-embed/src/mediaembedtoolbar.js';
import PageBreak from '#ckeditor/ckeditor5-page-break/src/pagebreak.js';
import Paragraph from '#ckeditor/ckeditor5-paragraph/src/paragraph';
import PasteFromOffice from '#ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import SimpleUploadAdapterStrapi from 'ckeditor5-upload-strapi/src/adapters/simpleuploadadapterstrapi';
import SpecialCharacters from '#ckeditor/ckeditor5-special-characters/src/specialcharacters.js';
import SpecialCharactersEssentials from '#ckeditor/ckeditor5-special-characters/src/specialcharactersessentials.js';
import SpecialCharactersArrows from '#ckeditor/ckeditor5-special-characters/src/specialcharactersarrows.js';
import SpecialCharactersCurrency from '#ckeditor/ckeditor5-special-characters/src/specialcharacterscurrency.js';
import SpecialCharactersLatin from '#ckeditor/ckeditor5-special-characters/src/specialcharacterslatin.js';
import SpecialCharactersMathematical from '#ckeditor/ckeditor5-special-characters/src/specialcharactersmathematical.js';
import SpecialCharactersText from '#ckeditor/ckeditor5-special-characters/src/specialcharacterstext.js';
import Strikethrough from '#ckeditor/ckeditor5-basic-styles/src/strikethrough.js';
import Subscript from '#ckeditor/ckeditor5-basic-styles/src/subscript.js';
import Superscript from '#ckeditor/ckeditor5-basic-styles/src/superscript.js';
import Table from '#ckeditor/ckeditor5-table/src/table.js';
import TableCellProperties from '#ckeditor/ckeditor5-table/src/tablecellproperties';
import TableProperties from '#ckeditor/ckeditor5-table/src/tableproperties';
import TableToolbar from '#ckeditor/ckeditor5-table/src/tabletoolbar.js';
import Title from '#ckeditor/ckeditor5-heading/src/title.js';
import TodoList from '#ckeditor/ckeditor5-list/src/todolist';
import Underline from '#ckeditor/ckeditor5-basic-styles/src/underline.js';
import UploadAdapter from '#ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
export default class AdvancedEditor extends ClassicEditorBase {}
AdvancedEditor.builtinPlugins = [
Essentials,
UploadAdapter,
Alignment,
Autoformat,
Bold,
Italic,
BlockQuote,
CKFinder,
CKFinderUploadAdapter,
EasyImage,
FontBackgroundColor,
FontColor,
FontFamily,
FontSize,
Heading,
HorizontalLine,
Image,
ImageCaption,
ImageResize,
ImageStyle,
ImageToolbar,
ImageUpload,
Indent,
IndentBlock,
Link,
List,
MediaEmbed,
MediaEmbedToolbar,
PageBreak,
Paragraph,
PasteFromOffice,
SimpleUploadAdapterStrapi,
SpecialCharacters,
SpecialCharactersEssentials,
SpecialCharactersArrows,
SpecialCharactersCurrency,
SpecialCharactersLatin,
SpecialCharactersMathematical,
SpecialCharactersText,
Strikethrough,
Subscript,
Superscript,
Table,
TableCellProperties,
TableProperties,
TableToolbar,
Title,
TodoList,
Underline
];
AdvancedEditor.defaultConfig = {
// ...many configurations here
language: 'en'
};
I ran the "npm run build" command and then copied the generated file (with translations folder) to the ./extensions/content-manager/admin/src/components/CKEditor folder and this is how I used it in the index.js file:
import React from 'react';
import PropTypes from 'prop-types';
import CKEditor from '#ckeditor/ckeditor5-react';
import styled from 'styled-components';
import { auth } from 'strapi-helper-plugin';
import AdvancedEditor from './ckeditor.js';
const Wrapper = styled.div`
.ck-editor__main {
min-height: 220px;
> div {
min-height: 220px;
}
}
`;
const Editor = ({ onChange, name, value }) => {
const jwtToken = auth.getToken();
return (
<Wrapper>
<CKEditor
editor={AdvancedEditor}
data={value}
onChange={(event, editor) => {
const data = editor.getData();
onChange({ target: { name, value: data } });
}}
config={{
simpleUpload: {
uploadUrl: `${strapi.backendURL}/upload`,
headers: {
Authorization: "Bearer " + jwtToken
}
}
}}
/>
</Wrapper>
);
};
Editor.propTypes = {
onChange: PropTypes.func.isRequired,
name: PropTypes.string.isRequired,
value: PropTypes.string.isRequired,
};
export default Editor
Now already in IDE (Webstorm) I receive a Duplicated code fragment warning. Build passed correctly though. But when I go into Admin Panel on the browser I see this error message:
CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated.
I did follow their instructions, deleted the node_modules folder and installed everything again, but still getting the same error.
Any ideas what is wrong here?
OK, finally figured it out. The problem was in all the plugins with version 18.0.0
I guess they were the ones duplicating some modules. Once downgraded to version 15.0.0 - it all worked as it should!
Here's a link to GitHub repo
And to npm package
I'm trying to use the react material-ui theme having installed it from npm, I get the following errors when I include 'import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";' in boot-client.tsx:
TS7016: Could not find a declaration file for module
'material-ui/styles/MuiThemeProvider'.
'W:/web/WebFront/node_modules/material-ui/styles/MuiThemeProvider.js'
implicitly has an 'any' type. Try npm install
#types/material-ui/styles/MuiThemeProvider if it exists or add a new
declaration (.d.ts) file containing declare module
'material-ui/styles/MuiThemeProvider';
I've tried both suggestions to no avail including running the command: npm install -D #types/material-ui.
My #types folder in node_modules exists with the relevant types.
Here is the code where I'm trying to use it:
import './css/site.css';
import 'bootstrap';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import { createBrowserHistory } from 'history';
import configureStore from './configureStore';
import { ApplicationState } from './store';
import * as RoutesModule from './routes';
let routes = RoutesModule.routes;
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
// Create browser history to use in the Redux store
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href')!;
const history = createBrowserHistory({ basename: baseUrl });
// Get the application-wide store instance, prepopulating with state from the server where available.
const initialState = (window as any).initialReduxState as ApplicationState;
const store = configureStore(history, initialState);
function renderApp() {
// This code starts up the React app when it runs in a browser. It sets up the routing configuration
// and injects the app into a DOM element.
ReactDOM.render(
,
document.getElementById('react-app')
);
}
renderApp();
// Allow Hot Module Replacement
if (module.hot) {
module.hot.accept('./routes', () => {
routes = require<typeof RoutesModule>('./routes').routes;
renderApp();
});
}
Ok I figured it out, in tsconfig.json under 'compilerOptions' visual-studio by default had its types set to ["webpack-env"], I needed to add "material-ui" to it or optionally just remove it: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
Use the default import from the same path.
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
The solution that worked for me which is med's answer above which I explain in more detail below.
Open the tsconfig.json file. Add "types":"material-ui", within "compilerOptions": {}
as in
"compilerOptions": {"types":"material-ui"}
I want to import a React component from a jsx file in a template and render it in the template with ReactDOM. Later in production I would only want to ship react and all the dependencies of the component only when a site is loaded that has that component.
I have created a React component like this:
editor.jsx
import * as React from "react";
import {Editor} from "draft-js-plugins-editor";
const plugins = [];
export class EditorComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty(),
};
}
onChange(editorState) {
this.setState({
editorState,
});
}
render() {
return (<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={plugins}
/>);
}
}
http://www.phoenixframework.org/docs/static-assets suggests the require syntax for accessing module exports. So I added the following to my template <script>const editor = require("web/static/js/editor").EditorComponent</script>. This does not work though, because the browser cannot interpret require (or brunch does not pick it up).
I configured brunch like so:
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/web\/static\/vendor/],
presets: ["es2015","react"]
}
},
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"],
"js/editor.jsx": ["web/static/js/editor"]
}
},
I am a bit lost here. How can this be done?
One idea that pops to mind is to create a JS file and import it in the template you want with a <script> tag. In the same template create an empty <div id=editor>. Then, in the JS file import React and ReactDOM and the component you want and use something like this:
ReactDOM.render(
<Editor/>,
document.getElementById("editor")
)
However, I'm not sure I understand your problem correctly.