[#167163350] front end setup #1
Conversation
…oreui, bootstrap-italia, parcel, sass
src/App.test.tsx
Outdated
| @@ -0,0 +1,9 @@ | |||
| import * as React from "react"; | |||
There was a problem hiding this comment.
put tests under __tests__ folders
src/scss/style.scss
Outdated
| // Import styles | ||
| @import "../../node_modules/@coreui/coreui/scss/coreui"; | ||
|
|
||
| // Temp fix for reactstrap |
There was a problem hiding this comment.
create a story in the backlog to remove the temp fix explaining when it can be removed + add link to the story in this comment + prefix the comment with TODO:
There was a problem hiding this comment.
The temp fix was added by CoreUI devs to fix a problem with right dropdown when used in app navbar
The issue can be reproduced in https://github.com/coreui/coreui-free-react-admin-template, when the fix is commented out, the dropdown menu that is shown from user avatar has the wrong width (.app-header .dropdown-item has min width of 180px and overflows menu)
Should be fixed by CoreUI devs or will be fixed with further analysis later
Opened story https://www.pivotaltracker.com/story/show/167402768 to keep track and added TODO prefix to comment
There was a problem hiding this comment.
add the link to the story in the comment below the todo
added TODO prefix to temp fix for reactstrap
Example of PR titles that include pivotal stories:
bootstrap-italiaAuthor: Presidenza del Consiglio dei Ministri Description: Bootstrap Italia è un tema Bootstrap 4 per la creazione di applicazioni web nel pieno rispetto delle Linee guida di design per i servizi web della PA Homepage: https://italia.github.io/bootstrap-italia/
|
| Created | about 5 years ago |
| Last Updated | 4 months ago |
| License | MIT |
| Maintainers | 5 |
| Releases | 31 |
| Direct Dependencies | chartjs-color and moment |
| Keywords | canvas, charts, data, graphs, html5 and responsive |
README
Simple yet flexible JavaScript charting for designers & developers
Documentation
- Introduction
- Getting Started
- General
- Configuration
- Charts
- Axes
- Developers
- Popular Extensions
- Samples
Contributing
Instructions on building and testing Chart.js can be found in the documentation. Before submitting an issue or a pull request, please take a moment to look over the contributing guidelines first. For support, please post questions on Stack Overflow with the chartjs tag.
License
Chart.js is available under the MIT license.
react
Author: Unknown
Description: React is a JavaScript library for building user interfaces.
Homepage: https://reactjs.org/
| Created | over 7 years ago |
| Last Updated | about 22 hours ago |
| License | MIT |
| Maintainers | 8 |
| Releases | 211 |
| Direct Dependencies | loose-envify, object-assign, prop-types and scheduler |
| Keywords | react |
bootstrap
Author: The Bootstrap Authors
Description: The most popular front-end framework for developing responsive, mobile first projects on the web.
Homepage: https://getbootstrap.com/
| Created | almost 8 years ago |
| Last Updated | 4 months ago |
| License | MIT |
| Maintainers | 3 |
| Releases | 29 |
| Direct Dependencies | |
| Keywords | css, sass, mobile-first, responsive, front-end, framework and web |
react-router-config
Author: Unknown
Description: Static route config matching for React Router
Homepage: https://github.com/ReactTraining/react-router#readme
| Created | over 2 years ago |
| Last Updated | about 1 month ago |
| License | MIT |
| Maintainers | 2 |
| Releases | 15 |
| Direct Dependencies | @babel/runtime |
| Keywords | react, router, route, routing, static routes, route config and react router |
README
React Router Config
Static route configuration helpers for React Router.
This is alpha software, it needs:
- Realistic server rendering example with data preloading
- Pending navigation example
Installation
Using npm:
$ npm install --save react-router-config
Then with a module bundler like webpack, use as you would anything else:
// using an ES6 transpiler, like babel
import { matchRoutes, renderRoutes } from "react-router-config";
// not using an ES6 transpiler
var matchRoutes = require("react-router-config").matchRoutes;The UMD build is also available on unpkg:
<script src="https://unpkg.com/react-router-config/umd/react-router-config.min.js"></script>You can find the library on window.ReactRouterConfig
Motivation
With the introduction of React Router v4, there is no longer a centralized route configuration. There are some use-cases where it is valuable to know about all the app's potential routes such as:
- Loading data on the server or in the lifecycle before rendering the next screen
- Linking to routes by name
- Static analysis
This project seeks to define a shared format for others to build patterns on top of.
Route Configuration Shape
Routes are objects with the same properties as a <Route> with a couple differences:
- the only render prop it accepts is
component(norenderorchildren) - introduces the
routeskey for sub routes - Consumers are free to add any additional props they'd like to a route, you can access
props.routeinside thecomponent, this object is a reference to the object used to render and match. - accepts
keyprop to prevent remounting component when transition was made from route with the same component and samekeyprop
const routes = [
{
component: Root,
routes: [
{
path: "/",
exact: true,
component: Home
},
{
path: "/child/:id",
component: Child,
routes: [
{
path: "/child/:id/grand-child",
component: GrandChild
}
]
}
]
}
];Note: Just like <Route>, relative paths are not (yet) supported. When it is supported there, it will be supported here.
API
matchRoutes(routes, pathname)
Returns an array of matched routes.
Parameters
- routes - the route configuration
- pathname - the pathname component of the url. This must be a decoded string representing the path.
import { matchRoutes } from "react-router-config";
const branch = matchRoutes(routes, "/child/23");
// using the routes shown earlier, this returns
// [
// routes[0],
// routes[0].routes[1]
// ]Each item in the array contains two properties: routes and match.
routes: A reference to the routes array used to matchmatch: The match object that also gets passed to<Route>render methods.
branch[0].match.url;
branch[0].match.isExact;
// etc.You can use this branch of routes to figure out what is going to be rendered before it actually is rendered. You could do something like this on the server before rendering, or in a lifecycle hook of a component that wraps your entire app
const loadBranchData = (location) => {
const branch = matchRoutes(routes, location.pathname)
const promises = branch.map(({ route, match }) => {
return route.loadData
? route.loadData(match)
: Promise.resolve(null)
})
return Promise.all(promises)
}
// useful on the server for preloading data
loadBranchData(req.url).then(data => {
putTheDataSomewhereTheClientCanFindIt(data)
})
// also useful on the client for "pending navigation" where you
// load up all the data before rendering the next page when
// the url changes
// THIS IS JUST SOME THEORETICAL PSEUDO CODE :)
class PendingNavDataLoader extends Component {
state = {
previousLocation: null
}
componentWillReceiveProps(nextProps) {
const navigated = nextProps.location !== this.props.location
const { routes } = this.props
if (navigated) {
// save the location so we can render the old screen
this.setState({
previousLocation: this.props.location
})
// load data while the old screen remains
loadNextData(routes, nextProps.location).then((data) => {
putTheDataSomewhereRoutesCanFindIt(data)
// clear previousLocation so the next screen renders
this.setState({
previousLocation: null
})
})
}
}
render() {
const { children, location } = this.props
const { previousLocation } = this.state
// use a controlled <Route> to trick all descendants into
// rendering the old location
return (
<Route
location={previousLocation || location}
render={() => children}
/>
)
}
}
// wrap in withRouter
export default withRouter(PendingNavDataLoader)
/////////////
// somewhere at the top of your app
import routes from './routes'
<BrowserRouter>
<PendingNavDataLoader routes={routes}>
{renderRoutes(routes)}
</PendingNavDataLoader>
</BrowserRouter>Again, that's all pseudo-code. There are a lot of ways to do server rendering with data and pending navigation and we haven't settled on one. The point here is that matchRoutes gives you a chance to match statically outside of the render lifecycle. We'd like to make a demo app of this approach eventually.
renderRoutes(routes, extraProps = {}, switchProps = {})
In order to ensure that matching outside of render with matchRoutes and inside of render result in the same branch, you must use renderRoutes instead of <Route> inside your components. You can render a <Route> still, but know that it will not be accounted for in matchRoutes outside of render.
import { renderRoutes } from "react-router-config";
const routes = [
{
component: Root,
routes: [
{
path: "/",
exact: true,
component: Home
},
{
path: "/child/:id",
component: Child,
routes: [
{
path: "/child/:id/grand-child",
component: GrandChild
}
]
}
]
}
];
const Root = ({ route }) => (
<div>
<h1>Root</h1>
{/* child routes won't render without this */}
{renderRoutes(route.routes)}
</div>
);
const Home = ({ route }) => (
<div>
<h2>Home</h2>
</div>
);
const Child = ({ route }) => (
<div>
<h2>Child</h2>
{/* child routes won't render without this */}
{renderRoutes(route.routes, { someProp: "these extra props are optional" })}
</div>
);
const GrandChild = ({ someProp }) => (
<div>
<h3>Grand Child</h3>
<div>{someProp}</div>
</div>
);
ReactDOM.render(
<BrowserRouter>
{/* kick it all off with the root route */}
{renderRoutes(routes)}
</BrowserRouter>,
document.getElementById("root")
);react-router-dom
Author: Unknown
Description: DOM bindings for React Router
Homepage: https://github.com/ReactTraining/react-router#readme
| Created | over 2 years ago |
| Last Updated | about 1 month ago |
| License | MIT |
| Maintainers | 2 |
| Releases | 34 |
| Direct Dependencies | @babel/runtime, history, loose-envify, prop-types, react-router, tiny-invariant and tiny-warning |
| Keywords | react, router, route, routing, history and link |
README
react-router-dom
DOM bindings for React Router.
Installation
Using npm:
$ npm install --save react-router-dom
Then with a module bundler like webpack, use as you would anything else:
// using ES6 modules
import { BrowserRouter, Route, Link } from "react-router-dom";
// using CommonJS modules
const BrowserRouter = require("react-router-dom").BrowserRouter;
const Route = require("react-router-dom").Route;
const Link = require("react-router-dom").Link;The UMD build is also available on unpkg:
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>You can find the library on window.ReactRouterDOM.
Issues
If you find a bug, please file an issue on our issue tracker on GitHub.
Credits
React Router is built and maintained by React Training.
react-scripts
Author: Unknown
Description: Configuration and scripts for Create React App.
Homepage: https://github.com/facebook/create-react-app#readme
README
react-scripts
This package includes scripts and configuration used by Create React App.
Please refer to its documentation:
- Getting Started – How to create a new app.
- User Guide – How to develop apps bootstrapped with Create React App.
reactstrap
Author: Unknown
Description: React Bootstrap 4 components
Homepage: https://github.com/reactstrap/reactstrap#readme
| Created | over 3 years ago |
| Last Updated | 8 days ago |
| License | MIT |
| Maintainers | 3 |
| Releases | 110 |
| Direct Dependencies | @babel/runtime, classnames, lodash.isfunction, lodash.isobject, lodash.tonumber, prop-types, react-lifecycles-compat, react-popper and react-transition-group |
| Keywords | reactstrap, bootstrap, react, component, components, react-component and ui |
@types/react
Author: Unknown
Description: TypeScript definitions for React
Homepage: http://npmjs.com/package/@types/react
| Created | about 3 years ago |
| Last Updated | 16 days ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 236 |
| Direct Dependencies | @types/prop-types and csstype |
README
Installation
npm install --save @types/react
Summary
This package contains type definitions for React (http://facebook.github.io/react/).
Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react
Additional Details
- Last updated: Wed, 03 Jul 2019 16:58:51 GMT
- Dependencies: @types/csstype, @types/prop-types
- Global values: React
Credits
These definitions were written by Asana https://asana.com, AssureSign http://www.assuresign.com, Microsoft https://microsoft.com, John Reilly https://github.com/johnnyreilly, Benoit Benezech https://github.com/bbenezech, Patricio Zavolinsky https://github.com/pzavolinsky, Digiguru https://github.com/digiguru, Eric Anderson https://github.com/ericanderson, Dovydas Navickas https://github.com/DovydasNavickas, Stéphane Goetz https://github.com/onigoetz, Josh Rutherford https://github.com/theruther4d, Guilherme Hübner https://github.com/guilhermehubner, Ferdy Budhidharma https://github.com/ferdaber, Johann Rakotoharisoa https://github.com/jrakotoharisoa, Olivier Pascal https://github.com/pascaloliv, Martin Hochel https://github.com/hotell, Frank Li https://github.com/franklixuefei, Jessica Franco https://github.com/Jessidhia, Saransh Kataria https://github.com/saranshkataria, Kanitkorn Sujautra https://github.com/lukyth, and Sebastian Silbermann https://github.com/eps1lon.
@coreui/react
Author: Łukasz Holeczek
Description: CoreUI React Bootstrap 4 components
Homepage: https://coreui.io
| Created | almost 2 years ago |
| Last Updated | about 2 months ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 36 |
| Direct Dependencies | @coreui/icons, classnames, core-js, prop-types, react-onclickout, react-perfect-scrollbar and reactstrap |
| Keywords | coreui, react, bootstrap, framework, responsive, layout, component and components |
README
@coreui/react v2 for CoreUI for React
- bootstrapped with nwb toolkit
npm run scripts
package.json is configured with "scripts" we can use with npm run while developing the project.
| Command | Description |
|---|---|
npm start |
start a development server for the demo app |
npm test |
run tests |
npm run test:coverage |
run tests and produce a code coverage report in coverage/ |
npm run test:watch |
start a test server and re-run tests on every change |
npm run build |
prepare for publishing to npm |
npm run clean |
delete built resources |
see also:
@types/react-dom
Author: Unknown
Description: TypeScript definitions for React (react-dom)
Homepage: http://npmjs.com/package/@types/react-dom
| Created | about 3 years ago |
| Last Updated | about 2 months ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 47 |
| Direct Dependencies | @types/react |
README
Installation
npm install --save @types/react-dom
Summary
This package contains type definitions for React (react-dom) ( http://facebook.github.io/react/ ).
Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-dom
Additional Details
- Last updated: Thu, 11 Apr 2019 17:57:21 GMT
- Dependencies: @types/react
- Global values: ReactDOM, ReactDOMNodeStream, ReactDOMServer
Credits
These definitions were written by Asana https://asana.com, AssureSign http://www.assuresign.com, Microsoft https://microsoft.com, MartynasZilinskas https://github.com/MartynasZilinskas, Josh Rutherford https://github.com/theruther4d, Jessica Franco https://github.com/Jessidhia.
@coreui/icons
Author: Łukasz Holeczek
Description: Free icons
Homepage: https://github.com/coreui/coreui-icons#readme
| Created | about 1 year ago |
| Last Updated | about 1 year ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 4 |
| Keywords | Icons, Font, Face, Svg and Vector |
README
CoreUI Icons - Simply beautiful open source icons
An open source icon set with marks in SVG, webfont and raster formats. Ready-to-use fonts and stylesheets that work with your favorite frameworks..
Preview & Docs
Installation
CDN
<link rel="stylesheet" href="https://unpkg.com/@coreui/icons/css/coreui-icons.min.css">NPM
npm install @coreui/icons --save
Or, you can also clone or download this repository as zip.
Basic Use
You can place CoreUI Icons just about anywhere using a CSS style prefix and the icon’s name. CoreUI Icons are designed to be used with inline elements ex. <i> or <span>.
<i class="cui-energy"></i>License
CoreUI Icons Free is free, open source, and GPL friendly. You can use it for
commercial projects, open source projects, or really almost whatever you want.
- Icons — CC BY 4.0 License
- In the CoreUI Icons Free download, the CC BY 4.0 license applies to all icons packaged as .svg and .js files types.
- Fonts — SIL OFL 1.1 License
- In the CoreUI Icons Free download, the SIL OLF license applies to all icons packaged as web and desktop font files.
- Code — MIT License
- In the CoreUI Icons Free download, the MIT license applies to all non-font and non-icon files.
@types/reactstrap
Author: Unknown
Description: TypeScript definitions for reactstrap
Homepage: http://npmjs.com/package/@types/reactstrap
| Created | over 2 years ago |
| Last Updated | about 2 months ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 67 |
| Direct Dependencies | @types/react and popper.js |
README
Installation
npm install --save @types/reactstrap
Summary
This package contains type definitions for reactstrap ( https://github.com/reactstrap/reactstrap#readme ).
Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/reactstrap
Additional Details
- Last updated: Wed, 17 Apr 2019 23:10:51 GMT
- Dependencies: @types/react, @types/popper.js
- Global values: none
Credits
These definitions were written by Ali Hammad Baig https://github.com/alihammad, Marco Falkenberg https://github.com/mfal, Danilo Barros https://github.com/danilobjr, FaithForHumans https://github.com/FaithForHumans, Tim Chen https://github.com/timc13, Pat Gaffney https://github.com/patrickrgaffney, Prabodh Tiwari https://github.com/prabodht, Georg Steinmetz https://github.com/georg94, Kyle Tsang https://github.com/kyletsang.
@coreui/coreui-plugin-chartjs-custom-tooltips
Author: Łukasz Holeczek
Description: Chart.js custom tooltips designed for CoreUI Templates
Homepage: https://coreui.io
| Created | over 1 year ago |
| Last Updated | about 2 months ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 5 |
| Direct Dependencies | ms |
| Keywords | chart, chart.js, coreui and tooltips |
parcel-bundler
Author: Unknown
Description: Blazing fast, zero configuration web application bundler
Homepage: https://github.com/parcel-bundler/parcel#readme
| Created | over 1 year ago |
| Last Updated | 4 months ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 41 |
| Direct Dependencies | @babel/code-frame, @babel/core, @babel/generator, @babel/parser, @babel/plugin-transform-flow-strip-types, @babel/plugin-transform-modules-commonjs, @babel/plugin-transform-react-jsx, @babel/preset-env, @babel/runtime, @babel/template, @babel/traverse, @babel/types, @iarna/toml, @parcel/fs, @parcel/logger, @parcel/utils, @parcel/watcher, @parcel/workers, ansi-to-html, babylon-walk, browserslist, chalk, clone, command-exists, commander, cross-spawn, css-modules-loader-core, cssnano, deasync, dotenv, dotenv-expand, fast-glob, filesize, get-port, htmlnano, is-glob, is-url, js-yaml, json5, micromatch, mkdirp, node-forge, node-libs-browser, opn, postcss, postcss-value-parser, posthtml, posthtml-parser, posthtml-render, resolve, semver, serialize-to-js, serve-static, source-map, terser, v8-compile-cache and ws |
README
ERROR: No README data found!
@coreui/coreui
Author: Łukasz Holeczek
Description: Open Source UI Kit built on top of Bootstrap 4
Homepage: https://coreui.io
| Created | over 1 year ago |
| Last Updated | about 1 month ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 62 |
| Direct Dependencies | @coreui/coreui-plugin-npm-postinstall, bootstrap, core-js and regenerator-runtime |
| Keywords | bootstrap, css, dashboard, framework, front-end, responsive, sass, ui kit and webapp |
README
CoreUI - Free WebApp UI Kit built on top of Bootstrap 4 
Please help us on Product Hunt and Designer News. Thanks in advance!
Curious why I decided to create CoreUI? Please read this article: Jack of all trades, master of none. Why Bootstrap Admin Templates suck.
CoreUI is an Open Source UI Kit built on top of Bootstrap 4. CoreUI is the fastest way to build modern dashboard for any platforms, browser or device. A complete Dashboard and WebApp UI Kit that allows you to quickly build eye-catching, high-quality, high-performance responsive applications using your framework of choice.
Table of Contents
- Templates
- Admin Templates built on top of CoreUI Pro
- Installation
- Usage
- What's included
- Documentation
- Contributing
- Versioning
- Creators
- Community
- License
- Support CoreUI Development
Templates
Admin Templates built on top of CoreUI Pro
| CoreUI Pro | Prime | Root | Alba | Leaf |
|---|---|---|---|---|
 |
 |
 |
 |
 |
Installation
Several options are available:
Clone repo
$ git clone https://github.com/coreui/coreui.gitNPM
$ npm install @coreui/coreui --saveYarn
$ yarn add @coreui/[email protected]Composer
$ composer require coreui/coreui:2.1.12Usage
CSS
Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
<link rel="stylesheet" href="node_modules/@coreui/coreui/dist/css/coreui.min.css">JS
Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, Bootstrap and our own JavaScript plugins. Place the following <script>s near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, then Bootstrap, and then our JavaScript plugins.
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>What's included
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
coreui/
├── build/
├── dist/
├── js/
└── scss/
Documentation
The documentation for the CoreUI Free Bootstrap Admin Template is hosted at our website CoreUI
Contributing
Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.
Editor preferences are available in the editor config for easy use in common text editors. Read more and download plugins at http://editorconfig.org.
Versioning
For transparency into our release cycle and in striving to maintain backward compatibility,CoreUI Free Admin Template is maintained under the Semantic Versioning guidelines.
See the Releases section of our project for changelogs for each release version.
Creators
Łukasz Holeczek
Andrzej Kopański
Community
Get updates on CoreUI's development and chat with the project maintainers and community members.
- Follow @core_ui on Twitter.
- Read and subscribe to CoreUI Blog.
Copyright and license
copyright 2018 creativeLabs Łukasz Holeczek. Code released under the MIT license.
There is only one limitation you can't can’t re-distribute the CoreUI as stock. You can’t do this if you modify the CoreUI. In past we faced some problems with persons who tried to sell CoreUI based templates.
Support CoreUI Development
CoreUI is an MIT licensed open source project and completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by donating on PayPal, buying CoreUI Pro Version or buying one of our premium admin templates.
As of now I am exploring the possibility of working on CoreUI fulltime - if you are a business that is building core products using CoreUI, I am also open to conversations regarding custom sponsorship / consulting arrangements. Get in touch on Twitter.
react-test-renderer
Author: Unknown
Description: React package for snapshot testing.
Homepage: https://reactjs.org/
| Created | about 3 years ago |
| Last Updated | about 22 hours ago |
| License | MIT |
| Maintainers | 10 |
| Releases | 126 |
| Direct Dependencies | object-assign, prop-types, react-is and scheduler |
| Keywords | react, react-native and react-testing |
New dependencies added: @coreui/coreui, @coreui/coreui-plugin-chartjs-custom-tooltips, @coreui/icons, @coreui/react, bootstrap, bootstrap-italia, chart.js, react, react-dom, react-router-config, react-router-dom, react-scripts, reactstrap, @types/react, @types/react-dom, @types/reactstrap, parcel-bundler, react-test-renderer and sass.
sass
Author: Natalie Weizenbaum
Description: A pure JavaScript implementation of Sass.
Homepage: https://github.com/sass/dart-sass
| Created | about 2 years ago |
| Last Updated | about 19 hours ago |
| License | MIT |
| Maintainers | 5 |
| Releases | 76 |
| Direct Dependencies | chokidar |
| Keywords | style, scss, sass, preprocessor and css |
README
A pure JavaScript implementation of Sass. Sass makes CSS fun again.
|
|
|
This package is a distribution of Dart Sass, compiled to pure JavaScript
with no native code or external dependencies. It provides a command-line sass
executable and a Node.js API.
Usage
You can install Sass globally using npm install -g sass which will provide
access to the sass executable. You can also add it to your project using
npm install --save-dev sass. This provides the executable as well as a
library:
var sass = require('sass');
sass.render({file: scss_filename}, function(err, result) { /* ... */ });
// OR
var result = sass.renderSync({file: scss_filename});See below for details on Dart Sass's JavaScript API.
API
When installed via npm, Dart Sass supports a JavaScript API that's fully
compatible with Node Sass (with a few exceptions listed below), with support
for both the render() and renderSync() functions. See the Sass
website for full API documentation!
Note however that by default, renderSync() is more than twice as fast as
render() due to the overhead of asynchronous callbacks. To avoid this
performance hit, render() can use the fibers package to call
asynchronous importers from the synchronous code path. To enable this, pass the
Fiber class to the fiber option:
var sass = require("sass");
var Fiber = require("fibers");
sass.render({
file: "input.scss",
importer: function(url, prev, done) {
// ...
},
fiber: Fiber
}, function(err, result) {
// ...
});Both render() and renderSync() support the following options:
datafilefunctionsimporterincludePathsindentTypeindentWidthindentedSyntaxlinefeedomitSourceMapUrloutFilesourceMapContentssourceMapEmbedsourceMapRootsourceMap- Only the
"expanded"and"compressed"values of
outputStyleare supported.
No support is intended for the following options:
-
precision. Dart Sass defaults
to a sufficiently high precision for all existing browsers, and making this
customizable would make the code substantially less efficient. -
sourceComments. Source
maps are the recommended way of locating the origin of generated selectors.
See Also
-
Dart Sass, from which this package is compiled, can be used either as a
stand-alone executable or as a Dart library. Running Dart Sass on the Dart VM
is substantially faster than running the pure JavaScript version, so this may
be appropriate for performance-sensitive applications. The Dart API is also
(currently) more user-friendly than the JavaScript API. See
the Dart Sass README for details on how to use it. -
Node Sass, which is a wrapper around LibSass, the C++ implementation
of Sass. Node Sass supports the same API as this package and is also faster
(although it's usually a little slower than Dart Sass). However, it requires a
native library which may be difficult to install, and it's generally slower to
add features and fix bugs.
Behavioral Differences from Ruby Sass
There are a few intentional behavioral differences between Dart Sass and Ruby
Sass. These are generally places where Ruby Sass has an undesired behavior, and
it's substantially easier to implement the correct behavior than it would be to
implement compatible behavior. These should all have tracking bugs against Ruby
Sass to update the reference behavior.
-
@extendonly accepts simple selectors, as does the second argument of
selector-extend(). See issue 1599. -
Subject selectors are not supported. See issue 1126.
-
Pseudo selector arguments are parsed as
<declaration-value>s rather than
having a more limited custom parsing. See issue 2120. -
The numeric precision is set to 10. See issue 1122.
-
The indented syntax parser is more flexible: it doesn't require consistent
indentation across the whole document. See issue 2176. -
Colors do not support channel-by-channel arithmetic. See issue 2144.
-
Unitless numbers aren't
==to unit numbers with the same value. In
addition, map keys follow the same logic as==-equality. See
issue 1496. -
rgba()andhsla()alpha values with percentage units are interpreted as
percentages. Other units are forbidden. See issue 1525. -
Too many variable arguments passed to a function is an error. See
issue 1408. -
Allow
@extendto reach outside a media query if there's an identical
@extenddefined outside that query. This isn't tracked explicitly, because
it'll be irrelevant when issue 1050 is fixed. -
Some selector pseudos containing placeholder selectors will be compiled
where they wouldn't be in Ruby Sass. This better matches the semantics of
the selectors in question, and is more efficient. See issue 2228. -
The old-style
:property valuesyntax is not supported in the indented
syntax. See issue 2245. -
The reference combinator is not supported. See issue 303.
-
Universal selector unification is symmetrical. See issue 2247.
-
@extenddoesn't produce an error if it matches but fails to unify. See
issue 2250. -
Dart Sass currently only supports UTF-8 documents. We'd like to support
more, but Dart currently doesn't support them. See dart-lang/sdk#11744,
for example.
Disclaimer: this is not an official Google product.
react-dom
Author: Unknown
Description: React package for working with the DOM.
Homepage: https://reactjs.org/
| Created | about 5 years ago |
| Last Updated | about 22 hours ago |
| License | MIT |
| Maintainers | 9 |
| Releases | 166 |
| Direct Dependencies | loose-envify, object-assign, prop-types and scheduler |
| Keywords | react |
…nderer to execute tests
There was a problem hiding this comment.
need to fix tests and also fix the title of the PR, see step 6 of our workflow
|
tests are now fixed, circleci danger seems to fail for unrelated reasons, see details and this: danger/danger-js#884 |
package.json
Outdated
| "enzyme": "^3.3.0", | ||
| "enzyme-adapter-react-16": "^1.1.1", | ||
| "enzyme-to-json": "^3.3.4", | ||
| "jest": "^23.4.2", |
package.json
Outdated
| "tslint": "^5.1.0", | ||
| "typescript": "3.5.3" | ||
| "typescript": "^3.0.1" |
src/setupEnzyme.ts
Outdated
| @@ -0,0 +1,4 @@ | |||
| import { configure } from "enzyme"; | |||
There was a problem hiding this comment.
this is used only for testing, it shouldn't be under src, makes sense to have it at root level
you probably need to enable |
fixed tsconfig and jest.config for problems with tests moved setupEnzyme to root folder create styleMocks to mock style files for test removed index.ts that created problems with tests
Initial set up for the project with an example element to test bootstrap-italia css