I am trying to use wavesurfer.js with node bundler, as indicated here:
https://www.npmjs.com/package/wavesurfer.js?activeTab=readme
but I can not get it working, I get the following error:
Uncaught SyntaxError: The requested module './../node_modules/wavesurfer.js/dist/wavesurfer.js' does not provide an export named 'default' (at TwoPlayers.js:2:9)
(I tried to import a module that I build without any troubles..., It seems like wavesurfer.js is not prepared to be load with import??)
Mi source code is:
import { LitElement, html, css } from "lit-element";
import WaveSurfer from 'wavesurfer.js';
import { MyFunction2 } from './demo'
// import * as WaveSurfer from 'wavesurfer.js';
class TwoPlayers extends LitElement {
static styles = css`
:host {
display: block;
border-radius: 0.5rem;
padding: 0.2rem 0.5rem;
background-color: #475119;
color: #fff;
font-weight: bold;
}
`;
In the examples folder always is used as a library loaded in the HTML, but there aren't any example using node bundler.
Has anyone managed to get it working with node using import?
Thanks in advance
Using this way to import the package:
import 'wavesurfer.js';
It will work, and you can use WaveSurfer object
The documentation say to use:
import WaveSurfer from 'wavesurfer.js';
but it is not working
Related
This is my styles/scss file where I am importing variables from variables.scss file:
#import '#angular/material/prebuilt-themes/deeppurple-amber.css';
#import 'variables';
#import '../node_modules/font-awesome/scss/font-awesome';
//some basic resets
body {
padding:0;
margin:0;
font-family: Roboto, sans-serif;
}
.container {
margin: 20px;
display:flex;
flex-direction: column;
}
This is my variables.scss file:
$fa-font-path : '../node_modules/font-awesome/fonts';
Error generated:
ERROR in ./node_modules/#angular/platform-browser/ivy_ngcc/fesm2015/animations.js 222:180-202 "export 'AnimationEngine' (imported as 'ɵngcc1') was not found in '#angular/animations/browser'
Okay so I have a fix for this. I was writing my imports for #font Awesome wrongly.
This is what I had initially.
#import '#angular/material/prebuilt-themes/deeppurple-amber.css';
#import 'variables';
#import '../node_modules/font-awesome/scss/font-awesome';
However, after some angular updates, this way of calling font awesome is no longer supported and will generate an error. Therefore, this is how to actually call font-awesome.
/* You can add global styles to this file, and also import other style files */
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
#import 'variables';
#import '../node_modules/font-awesome/scss/_variables.scss';
Therefore, there is the fix.
In my project i want to change the background-color and font of text. Both the properties are written in css file.
Project structure is:
|-myProject
|--public
|--src
|--package.json
All my css is written in public directory, and i have an api which give response of background-color and font. Now i want to change the properties background-color and font in css files according to api response.
Instead of trying to modify the base stylesheets, why not set these particular properties using the elements’ style attributes:
const divStyle = {
backgroundColor: /* Some color */,
fontFamily: /* Some font stack */,
};
function HelloWorldComponent() {
return <div style={ divStyle }>Hello World!</div>;
}
(adapted from the React docs)
I think the best way to do this would be to use inline style on the elements you want to change.
On api response -> set
const yourVar={
backgroundColor:##,
fontFamily:##
};
I believe that the answer from MTCoster is the best approach. depending on the structure of your app you could use the new Context API to make some sort of theme provider, so that you could pass custom styles that could be stored on your application state and that is loaded from your backend API. there are some tools that could help you integrate this feature more easily, like Styled-Components.
with Styled components you culd write something like:
import styled from 'styled-components'
import { YourComponentJSX } from '../somewhere'
// Wrap the component where you need your custom styles
const YourStyledComponent = styled(YourComponentJSX)`
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border-radius: 3px;
/* Color the border and text with theme.main */
// using the short-if to add a default color in case it is not connected to the ThemeProvider
color: ${props => props.theme.main ? props.theme.main : "palevioletred"};
border: 2px solid ${props => props.theme.main ? props.theme.main : "palevioletred"};
`;
// Define what props.theme will look like
const theme = {
main: "mediumseagreen"
};
render(
<div>
<ThemeProvider theme={theme}>
<App>
<YourStyledComponent>Themed</YourStyledComponent>
</App>
</ThemeProvider>
</div>
);
This way you could wrap your whole app and use custom styles saved on the app state that have been loaded from the backend and use them on really deeply nested ui components
*The code is a modification from the styled-component docs
I'm trying to change the color of the select-up-arrow and the color of the control when it's in focus, but without success. Have anyone done this using styled-components?
This applies to react-select#v2.*
The same ideas as #bamse answer can be applied to v2 of react-select. The problem is that in v2 they removed pre-determined class names unless you specify to add them in with the prop classNamePrefix. They also changed what the class names in general look like.
General solution is to make sure to add in the class names with the prop classNamePrefix, then use styled around ReactSelect and target classes within it.
import React from 'react';
import ReactSelect from 'react-select';
import styled from 'styled-components';
const ReactSelectElement = styled(ReactSelect)`
.react-select__indicator react-select__dropdown-indicator {
border-color: transparent transparent red;
}
`;
export (props) => <ReactSelectElement classNamePrefix="react-select" {...props} />
This applies to react-select#v3.*
I had the same problem and solved it like this:
CustomSelect.js file:
import ReactSelect from 'react-select';
import styled from 'styled-components';
export const CustomSelect = styled(ReactSelect)`
& .Select__indicator Select__dropdown-indicator {
border-color: transparent transparent red;
}
`;
TheComponent.js file:
import React from 'react';
import { CustomSelect } from './CustomSelect';
export function TheComponent () {
return <div>
<CustomSelect
classNamePrefix={'Select'}
{* props... *}
/>
Something awesome here...
</div>
}
`;
Note the classNamePrefix={'Select'} in TheComponent.js - that's important.
This applies to react-select#v1.*
Here you can find an example of styling react-select with styled-components.
To change to caret's colour when the select is opened you can use this
&.Select.is-open > .Select-control .Select-arrow {
border-color: transparent transparent red;
}
The component would look like
import React from 'react';
import ReactSelect from 'react-select';
import styled from 'styled-components';
const RedCaretWhenOpened = styled(ReactSelect)`
&.Select.is-open > .Select-control .Select-arrow {
border-color: transparent transparent red;
}
`;
export (props) => <RedCaretWhenOpened {...props} />
I'm using https://github.com/styled-components/styled-components.
I'm trying to work out the best strategy for components that require #font-face. I want to make sure each component is independent of its context, so I'm defining font-family styles on each them. But if I use injectGlobal in multiple components, I get multiple #font-face rules for the same font.
Should I just define the #font-face rules in my ThemeProvider entry-point component and live with the fact that the desired font might not be loaded by the browser?
That's exactly why we made injectGlobal. If you take a look at our docs they say:
We do not encourage the use of this. Use once per app at most, contained in a single file. This is an escape hatch. Only use it for the rare #font-face definition or body styling.
So what I'd do is create a JS file called global-styles.js which contains this code:
// global-styles.js
import { injectGlobal } from 'styled-components';
injectGlobal`
#font-face {
font-family: 'My custom family';
src: url('my-source.ttf');
}
`
As you can see, all we do here is inject some global styling-in this case #font-face. The last thing necessary to make this work is to import this file in your main entry point:
// index.js
import './global-styles.js'
// More stuff here like ReactDOM.render(...)
This will mean your font-face is only injected once, but still all of your components have access to it with font-family: 'My custom family'!
Doing it this way will give you a flash-of-invisible-text (FOIT), but that has nothing to do with styled-components-it'd be the same if you were using vanilla CSS. To get rid of the FOIT requires a more advanced font loading strategy rather than just #font-faceing.
Since this has nothing to do with styled-components, I highly recommend watching these two Front End Center episodes to learn more about how to best do this: "Crafting Web Font Fallbacks" and "The Fastest Webfont Loader in the West"!
And on the other side of the same coin in Chrome:
do not use #font-face inside injectGlobal if using e.g. react-router.
You will get re-paint of all of you app on each newly loaded route.
And this is why:
Same font-files downloaded on each new route.
As soon as you include font-face in a separate .css file - problem solves as stated in the last comment in this github issue.
injectGlobal is deprecated. Use createGlobalStyle
import { createGlobalStyle } from 'styled-components'
export const GlobalStyle = createGlobalStyle`
body {
font-family: 'Muli', sans-serif;
h1 {
font-weight: 800;
font-size: 36px;
p {
font-size: 18px;
}
}
`;
Then you can use it in your App.js:
import { GlobalStyle } from './styles/global'
class App extends Component {
render() {
return (
<ThemeProvider theme={theme}>
<>
<GlobalStyle/>
<Container/>
</>
</ThemeProvider>
)
}
}
I agree
I get reloaded with
import { createGlobalStyle } from 'styled-components';
import { silver } from 'shared-components/themes/colors';
export default createGlobalStyle`
#font-face {
font-family: "Proxima Nova";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("/static/media/fonts/proxima_nova/ProximaNova_300.otf");
}
and react create app
If you use #import(reference) in LESS and then subsequently import the same LESS file without using (reference) the subsequent import is ignored.
e.g.
Stylesheet1:
#In1 { background-color: red; }
Stylesheet2:
#import (reference) 'Stylesheet1.less';
#In2 { background-color: blue; #In1; }
Stylesheet3:
#import 'Stylesheet2.less';
#import 'Stylesheet1.less';
#In3 { background-color: green; }
So Stylesheet2 imports stylesheet1 but instructs LESS not to output the styles from the imported file unless they are used (as per the #In1; mixin)
Stylesheet3 then imports Stylesheet2, not knowing that it already imports Stylesheet1.
It then imports Stylesheet1 without the (reference) directive, with the intention of directly outputting the styles.
Expected output:
#In2 { background-color: blue; background-color: red; }
#In1 { background-color: red;}
#In3 { background-color: green;}
Actual output:
#In2 { background-color: blue; background-color: red; }
#In3 { background-color: green;}
Am I missing an option on the import statement to make this work or this is a bug in LESS (or web-essentials2012s' implementation of LESS).
Having found the cause of this I can easily enough swap the imports statements in Stylesheet3 around and the issue go away however I'd prefer to have a solution that doesn't require knowing the contents of the imported LESS file.