npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@plone/plone-react

v0.8.3

Published

Plone in React

Downloads

5

Readme

Plone in React

Build Status Coverage Dependencies Dev Dependencies NPM

Installation

Prerequisites

Install dependencies

$ yarn

Install backend

$ cd api
$ ./bootstrap.sh

Development

Run backend

$ cd api
$ ./bin/instance fg

or

$ docker-compose -f api/docker-compose.yml up

Run frontend

$ yarn start

Browsing

Go to http://localhost:3000 in your browser.

Testing

$ yarn test

Acceptance testing

$ make test-acceptance

Alternatively individual acceptances test case files can be run with a pure Robot Framework virtual environment, assuming that backend and frontend is running

$ docker-compose -f api/docker-compose.yml up
$ yarn && yarn build && API_PATH=http://localhost:55001/plone yarn start:prod

$ virtualenv robotenv --no-site-packages
$ robotenv/bin/pip install robotframework robotframework-seleniumlibrary robotframework-webpack
$ robotenv/bin/pybot tests/test_login.robot

Another alternative for developing Robot Framework acceptane tests is to use Jupyter notebook

$ make -C api/jupyter

Static Code Analysis

Prettier

Please refer this link for all usages.

CLI

Run Prettier through the CLI with this script. Run it without any arguments to see the options.

To format a file in-place, use --write. You may want to consider committing your code before doing that, just in case. prettier [opts] [filename ...] In practice, this may look something like: prettier --single-quote --trailing-comma es5 --write "{app,__{tests,mocks}__}/**/*.js"

Using Plugins

Plugins are automatically loaded if you have them installed in your package.json. Prettier plugin package names must start with @prettier/plugin- or prettier-plugin- to be registered. If the plugin is unable to be found automatically, you can load them with:

  1. The CLI, via the --plugin flag:

prettier --write main.foo --plugin=./foo-plugin

  1. Or the API, via the plugins field:
  parser: "foo",
  plugins: ["./foo-plugin"]
});
Pre commit hook

You can use Prettier with a pre-commit tool. This can re-format your files that are marked as "staged" via git add before you commit.

  1. Lint staged Use Case: Useful for when you need to use other tools on top of Prettier (e.g. ESLint)

Install it along with husky:

yarn add lint-staged husky --dev

and add this config to your package.json:

{
  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,json,css,md}": ["prettier --write", "git add"]
  }
}
  1. Pretty-quick Use Case: Great for when you want an entire file formatting on your changed/staged files.

yarn add pretty-quick husky --dev

and add this config to your package.json:

{
  "scripts": {
    "precommit": "pretty-quick --staged"
  }
}

More Precommit hooks can be found here

License

MIT License. Copyrights hold the Plone Foundation. See LICENSE.md for details.

Running Guillotina Tests

First, start up Guillotina:

docker-compose -f g-api/docker-compose.yml up -d

Then, run the tests:

PYTHONPATH=$(pwd)/tests_guillotina env/bin/pybot -v BROWSER:headlesschrome tests_guillotina;