# @cocalc/static

> CoCalc's static frontend Webpack-based build system and framework

Latest version **1.136.7** (published 2023-01-04) · SEE LICENSE.md license · 0 weekly downloads

## Install

```sh
npm install @cocalc/static
pnpm add @cocalc/static
yarn add @cocalc/static
bun add @cocalc/static
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.136.7 |
| Published | 2023-01-04 |
| First published | 2021-05-21 |
| Weekly downloads | 0 |
| License | SEE LICENSE.md |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 23.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1288 |
| Author | SageMath, Inc. |
| Maintainers | wstein, hasch |
| Keywords | python, sage, sagemath, latex, terminal, web, ide, math, mathematics |

## Links

- npm: https://www.npmjs.com/package/@cocalc/static
- Repository: https://github.com/sagemathinc/cocalc
- Homepage: https://github.com/sagemathinc/cocalc/tree/master/src/packages/static
- Issues: https://github.com/sagemathinc/cocalc/issues
- npm.io page: https://npm.io/package/@cocalc/static

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 1.136.7 (latest) — 2023-01-04
- 1.111.3 (next-sso) — 2022-08-24
- 1.89.0 (boost-dedi-5796) — 2022-05-11
- 1.70.4 (pr-5775) — 2022-03-16
- 1.69.0 (pr-5723) — 2022-03-06
- 1.40.1 (pr5543) — 2021-10-29
- 1.14.0 (basepath) — 2021-07-25
- 1.136.6 — 2023-01-03
- 1.136.5 — 2023-01-03
- 1.136.4 — 2023-01-03
- 1.136.2 — 2023-01-03
- 1.136.1 — 2023-01-02
- 1.136.0 — 2023-01-02
- 1.135.3 — 2022-12-20
- 1.135.2 — 2022-12-08
- … 348 more at https://npm.io/package/@cocalc/static/versions

## README

# CoCalc's Static Frontend Webapp Assets

Using webpack we build the static assets that run in the client's browser.

## The `npm run` scripts

### 1. Development

When doing development, use `npm run webpack` and `npm run tsc` in two terminals.

```sh
npm run weppack
npm run tsc
```
ALSO, run `npm run tsc` in the `packages/frontend` directory, if you are editing that code.

The first runs webpack to package everything up, the second independently checks for errors in the typescript files in the `frontend` package (the two should not interfere in any way with each other), and the third does the same for code in `packages/static/src`. If you're using an editor like vscode that tells you Typescript errors, you don't need to bother with `npm run tsc-*`.

Use `npm run webpack-prod` to build and test the production version locally:

```sh
npm run webpack-prod
```

This is the same as `npm run webpack`, but with more aggressive chunking, caching, minification, etc. It's a good idea to test this before making a release, in case something surprising changes.  Also, check in the Network tab of Chrome dev tools that loading cocalc doesn't transfer too much data (e.g., due to installing a huge package).

If you get really weird errors that make no sense, the on-disk cashing may be broken.  In that case, delete it and restart webpack:

```sh
rm -rf /tmp/webpack
```

### 2. Measuring size

Run `npm run webpack-measure` and when it finishes, look at `dist-measure/measure.html` for an interactive graphic that shows how much space each part of CoCalc is using.  Use `npm run webpack-measure-prod` to see what the situation is for the production build.

It's often useful to do:

```sh
ls -lh dist/*.js |more
```

### 3. Making a release to npmjs

Make sure to kill any running webpack first.  Everything to make a release is automated by going to `~/cocalc/src` and using `npm run publish ...`:

```sh
$ cd ../..
$ pwd
/home/user/cocalc/src
$ time npm run update-version --packages=static --newversion=minor
$ time npm run publish --packages=static
```

Here `newversion` could be major, minor, or patch.  This does a full production build, updates 
the version in `package.json`, then pushes the result to npmjs.com, and commits the change 
to package.json to git.

If you want to make a _development release,_ e.g., to make it easier to debug something on [test.cocalc.com](http://test.cocalc.com), do

```sh
time NODE_ENV=development npm run publish --packages=static
```

## More about development

First we assume you have installed all dev dependencies everywhere for all modules (`npm ci; npm run build`). To do interactive development on CoCalc, you start webpack and typescript in watch mode as follows:

To do development, in one terminal session (in this package/static directory!) start webpack running

```sh
npm run webpack
```

As you edit code, this quickly shows any errors webpack finds in bundling
all your code up.

In a second terminal (also in this package/static directory!), start watching for errors via typescript:

```sh
npm run tsc-frontend
```

The files that are produced by webpack, and that your hub serves up are in the subdirectory `dist/`.  The hub server serves these static files to your browser.

If you're editing Typescript files in `src/`, you should also run

```sh
npm run tsc-static
```

which will check those files for typescript errors.

## Landmines to watch out for

### The module search path:

If there is a package installed in `packages/static/node_modules` it will get included by webpack before the same (but different version) package in `frontend/node_modules`, because of what we listed in `resolve.modules` in `webpack.config.js`. This can cause confusion. E.g., maybe an old version of the `async` library gets indirectly installed in `packages/static/node_modules`, which is wrong. That's why a specific version of async is installed here. The one good thing about this is it makes it easier to override modules installed in `frontend/` if necessary, like we do with `pdfjs-dist` since otherwise it ends up with its own copy of webpack.

### tsconfig.json and code splitting

Code splitting [can't work](https://davidea.st/articles/webpack-typescript-code-split-wont-work) without this tsconfig.json option:

```js
{
  "compilerOptions": {
    "module": "esnext"
  }
}
```

### Changing code in other packages such as `packages/util`

1. Change something in `packages/util`.
2. You **must** do `npm run build` in `packages/util` to make the changes visible to webpack!  This is because anything outside of `packages/util` actually only sees `packages/util/dist` which is the compiled versions of everything.   This is a significant change from before.

---
_Source: https://npm.io/package/@cocalc/static · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._