#StackBounty: #typescript #npm #yarnpkg #monaco-editor #language-server-protocol editor.IStandaloneCodeEditor' is not assignable to…

Bounty: 100

in order to use monaco in below source code I did install below package but I’m getting that type error. Why is that and how can I fix that?

package:

npm i monaco-editor

I’m using this command:

yarn install

the package file looks like this:

{
  "private": true,
  "name": "node-example",
  "version": "0.13.0",
  "dependencies": {
    "@codingame/monaco-jsonrpc": "^0.3.1",
    "express": "^4.15.2",
    "file-loader": "^4.3.0",
    "monaco-editor": "^0.27.0",
    "monaco-editor-core": "^0.22.3",
    "monaco-editor-webpack-plugin": "^4.1.2",
    "monaco-languageclient": "^0.13.0",
    "normalize-url": "^2.0.1",
    "reconnecting-websocket": "^3.2.2",
    "request-light": "^0.2.2",
    "vscode-json-languageservice": "^4.0.2",
    "vscode-languageserver": "7.0.0",
    "vscode-uri": "^3.0.2",
    "vscode-ws-jsonrpc": "^0.2.0",
    "ws": "^5.0.0"
  },
  "scripts": {
    "prepare": "yarn run clean && yarn run build",
    "compile": "tsc",
    "watch": "tsc -w",
    "clean": "rimraf lib",
    "copy": "cp src/index.html lib/index.html",
    "build": "yarn run compile && webpack && yarn run copy",
    "start": "node lib/server.js",
    "start:ext": "node lib/server.js --external"
  },
  "devDependencies": {
    "webpack-cli": "^4.8.0"
  }
}

And this the error I’m getting:

src/client.ts:32:24 – error TS2345: Argument of type
‘import("path/to/project/monaco-languageclient/example/node_modules/monaco-editor/esm/vs/editor/editor.api").editor.IStandaloneCodeEditor’
is not assignable to parameter of type
‘monaco.editor.IStandaloneCodeEditor’.

this is the full source code:

import { listen, MessageConnection } from 'vscode-ws-jsonrpc';
import {
    MonacoLanguageClient, CloseAction, ErrorAction,
    MonacoServices, createConnection
} from 'monaco-languageclient';
import * as monaco from 'monaco-editor'
import normalizeUrl = require('normalize-url');
const ReconnectingWebSocket = require('reconnecting-websocket');

// register Monaco languages
monaco.languages.register({
    id: 'typescript',
    extensions: ['.ts'],
    aliases: ['TypeScript','ts','TS','Typescript','typescript']
})

// create Monaco editor
const value = `{
    "$schema": "http://json.schemastore.org/coffeelint",
    "line_endings": "unix"
}`;
const editor = monaco.editor.create(document.getElementById("container")!, {
    model: monaco.editor.createModel(value, 'typescript', monaco.Uri.parse('file:///abs/path/to/demo/ts/file.ts')),
    glyphMargin: true,
    theme: "vs-dark",
    lightbulb: {
        enabled: true
    }
});

// install Monaco language client services
MonacoServices.install(editor,{rootUri: "file:///abs/path/to/demo/ts"});

// create the web socket
const url = createUrl('ws://localhost:3000/ts')
const webSocket = createWebSocket(url);
// listen when the web socket is opened
listen({
    webSocket,
    onConnection: connection => {
        // create and start the language client
        const languageClient = createLanguageClient(connection);
        const disposable = languageClient.start();
        connection.onClose(() => disposable.dispose());
    }
});

function createLanguageClient(connection: MessageConnection): MonacoLanguageClient {
    return new MonacoLanguageClient({
        name: "Sample Language Client",
        clientOptions: {
            // use a language id as a document selector
            documentSelector: ['typescript'],
            // disable the default error handler
            errorHandler: {
                error: () => ErrorAction.Continue,
                closed: () => CloseAction.DoNotRestart
            }
        },
        // create a language client connection from the JSON RPC connection on demand
        connectionProvider: {
            get: (errorHandler, closeHandler) => {
                return Promise.resolve(createConnection(connection, errorHandler, closeHandler))
            }
        }
    });
}

function createUrl(path: string): string {
    return normalizeUrl(path);
}

function createWebSocket(url: string): WebSocket {
    const socketOptions = {
        maxReconnectionDelay: 10000,
        minReconnectionDelay: 1000,
        reconnectionDelayGrowFactor: 1.3,
        connectionTimeout: 10000,
        maxRetries: Infinity,
        debug: false
    };
    return new ReconnectingWebSocket(url, [], socketOptions);
}


Get this bounty!!!

#StackBounty: #angular #yarnpkg #nrwl-nx #nrwl Project generator with specific ng/nrwl versions

Bounty: 50

Sadly we are, for several reasons, not able to use the angular 12 version, therefore we do not want to use the current versions of ng and nrwl.

I haven’t found documentation about how to generate a project with a specific version of ng. It seems that it always uses the most corrent version. But we need to use an older version (^10.0.0).

What I do is this:

yarn global add @nrwl/cli@10.0.6
yarn create nx-workspace myProject --style=scss --preset=empty --nx-cloud=false --cli=angular

But this will use the 12.6.5 version:

    "@angular/cli": "~12.1.0",
    "@nrwl/tao": "12.6.5",
    "@nrwl/cli": "12.6.5",
    "@nrwl/workspace": "12.6.5",
    "@types/node": "14.14.33",
    "dotenv": "~10.0.0",
    "ts-node": "~9.1.1",
    "typescript": "~4.3.5",
    "prettier": "^2.3.1"

I like to avoid all ^12 versions and get instead the ^10 versions of these libraries.

When I try (I am not sure if this is correct syntax): yarn create nx-workspace@10.0.6 myProject --style=scss --preset=empty --nx-cloud=false --cli=angular it does not succed.

I get an error, like:

success Installed "create-nx-workspace@10.0.6" with binaries:
      - create-nx-workspace
/bin/sh: /usr/local/bin/create-nx-workspace@10.0.6: No such file or directory
error Command failed.

If anybody could tell me how to execute a create nx-workspace command with a specific version, I would be thankfull.


Get this bounty!!!

#StackBounty: #node.js #docker #yarnpkg Yarn workspaces build with docker

Bounty: 50

Consider following file structure of yarn workspaces:

.
├── docker-compose.yaml
├── package.json
├── packages
│   └── pkg-1
│       ├── dist
│       ├── package.json
│       ├── src
│       └── tsconfig.json
├── services
│   ├── api-1
│   │   ├── dist
│   │   ├── Dockerfile
│   │   ├── package.json
│   │   ├── src
│   │   ├── tsconfig.json
│   │   └── yarn.lock
│   └── client-1
│       ├── package.json
│       ├── src
│       └── yarn.lock
├── tsconfig.json
└── yarn.lock

I have written Dockerfile to create image for api-1:

ARG APP_DIR=/usr/app

# Build stage
FROM node:16.2-alpine AS build

ARG APP_DIR

WORKDIR ${APP_DIR}
COPY package.json ./
COPY yarn.lock ./
COPY tsconfig.json ./

WORKDIR ${APP_DIR}/packages/pkg-1
COPY packages/pkg-1/package.json ./
RUN yarn --pure-lockfile --non-interactive
COPY packages/pkg-1/tsconfig.json ./
COPY packages/pkg-1/src/ ./src
RUN yarn build

WORKDIR ${APP_DIR}/services/api-1
COPY services/api-1/package.json ./
COPY services/api-1/yarn.lock ./
RUN yarn --pure-lockfile --non-interactive
COPY services/api-1/tsconfig.json ./
COPY services/api-1/src/ ./src
RUN yarn build

# Production stage
FROM node:16.2-alpine AS prod

ARG APP_DIR

WORKDIR ${APP_DIR}
COPY --from=build ${APP_DIR}/package.json ./
COPY --from=build ${APP_DIR}/yarn.lock ./

WORKDIR ${APP_DIR}/packages/pkg-1
COPY --from=build ${APP_DIR}/packages/pkg-1/package.json ./
RUN yarn --pure-lockfile --non-interactive --production
COPY --from=build ${APP_DIR}/packages/pkg-1/dist ./dist

WORKDIR ${APP_DIR}/services/api-1
COPY --from=build ${APP_DIR}/services/api-1/package.json ./
COPY --from=build ${APP_DIR}/services/api-1/yarn.lock ./
RUN yarn --pure-lockfile --non-interactive --production
COPY --from=build ${APP_DIR}/services/api-1/dist ./dist

CMD ["node", "dist"]

Build is running from root docker-compose.yaml to have proper context:

services:
  api-1:
    image: project/api-1
    container_name: api-1
    build:
      context: ./
      dockerfile: ./services/api-1/Dockerfile
      target: prod
    ports:
      - 3000:3000

It is working but this way there will be a lot of repetition while application grow. Problem is the way how packages are building.

Package can be for example normalized components collection used among client services or collection of normalized errors used among api services.

Whenever I will build some service I need to first build its depending packages which is unnecessarily repetitive task. Not mention that building steps of respective package are defined over and over again in Dockerfile of every single service that uses the package.

So my question is. Is there a way how to create for example image of package that will be used for building a service to avoid defining build steps of package in service Dockerfile?


Get this bounty!!!

#StackBounty: #typescript #yarnpkg #netlify #lerna #yarn-workspaces Using UI Library as a Dependency for Web App on Netlify Monorepo (Y…

Bounty: 500

I have two apps, glowystuff-web, and glowy-ui. Glowy-UI is a shared UI lib, that I plan to use on other projects, kind of my own React Bootstrap.

Here’s the challenge. I have glowy-ui defined as a dependency in packages/glowystuff-web/package.json as follows:

{
 "dependencies": {
   "glowy-ui": "*"
 },
 "scripts": {
  "build": "gatsby build"
 }
}

Unless I run yarn build (which compiles using tsc to glowy-ui/lib) and commit the JS lib/ files to git (yuck!) I get errors like this build:

3:47:15 PM: failed Building production JavaScript and CSS bundles - 24.131s
3:47:15 PM: error Generating JavaScript bundles failed
3:47:15 PM: Can't resolve 'glowy-ui' in '/opt/build/repo/packages/glowystuff-web/src/components'
3:47:15 PM: If you're trying to use a package make sure that 'glowy-ui' is installed. If you're trying to use a local file make sure that the path is correct.

For context, these are the Best instructions I’ve found for Monorepos (with Yarn Workspaces) on Netlify:

https://community.netlify.com/t/difficulty-with-new-monorepo-deployment-options/4381/9

What’s unclear to me is how I get Netlify to know that building needs to happen. If I did this on packages/glowystuff-web/package.json:

"scripts": {
  "build": "yarn workspace glowy-ui build && gatsby build"
}

… then it seems like it would build the UI lib on every build of the main web app, glowystuff-web, even when there were no updates to the UI lib code.

A private, published NPM package for glowy-ui could be a workable option here, but my idea was to have a single GitHub repo with Yarn Workspaces, where I don’t need to publish. After all, why publish if all the files are available for reading?

So what’s the best approach, on Netlify/Yarn Workspaces, to make things build, but also take advantage of caching when appropriate?

Additional context on current builds – netlify.tomls:

We are using the code-as-config approach to Netlify builds. Here is current packages/glowystuff-web/netlify.toml:

[build]
  publish = "public/"
  command = "yarn build"

Glowy-UI is both the UI lib, and the accompanying storybook app, so here is current packages/glowy-ui/netlify.toml:

[build]
  publish = "storybook-static"
  command = "yarn build-storybook"


Get this bounty!!!