Getting Started Guide: Generate JS into daml.js (#5390)

Change the output directory given to `daml codegen ts` from `daml-ts`
to `daml.js`. This is naming is in line with the fact that `daml2ts`
puts all generated packages into the `@daml.js` scope. A renaming of
`daml2ts` into `daml2js` is immiment.

This PR also changes a few small documentation issues the
search-and-replace has surfaced.

CHANGELOG_BEGIN
CHANGELOG_END

daml-assistant/integration-tests/src/DA/Daml/Assistant/IntegrationTests.hs

@@ -565,7 +565,7 @@ createDamlAppTests = testGroup "create-daml-app" [gettingStartedGuideTest | not
           copyDirectory srcDir (tmpDir </> tsLib)
         BSL.writeFile (tmpDir </> "package.json") $ Aeson.encode $ object
           [ "private" .= True
-          , "workspaces" .= ["create-daml-app/daml-ts", "create-daml-app/ui" :: String]
+          , "workspaces" .= ["create-daml-app/daml.js", "create-daml-app/ui" :: String]
           , "resolutions" .= object
               [ pkgName .= ("file:" ++ tsLib)
               | tsLib <- tsLibs, let pkgName = "@" <> T.replace "-" "/"  (T.pack tsLib)
@@ -576,7 +576,7 @@ createDamlAppTests = testGroup "create-daml-app" [gettingStartedGuideTest | not
         let cdaDir = tmpDir </> "create-daml-app"
         withCurrentDirectory cdaDir $ do
           callCommandSilent "daml build"
-          callCommandSilent "daml codegen ts -o daml-ts .daml/dist/create-daml-app-0.1.0.dar"
+          callCommandSilent "daml codegen ts -o daml.js .daml/dist/create-daml-app-0.1.0.dar"
         doesFileExist (cdaDir </> "ui" </> "build" </> "index.html") >>=
           assertBool "ui/build/index.html does not yet exist" . not
         withCurrentDirectory (cdaDir </> "ui") $ do

docs/source/app-dev/app-arch.rst

@@ -85,11 +85,12 @@ corresponding typescript data definitions for the data types declared in the dep
 
 .. code-block:: bash
 
-  daml codegen ts .daml/dist/<your-project-name.dar> -o daml-ts
+  daml codegen ts .daml/dist/<your-project-name.dar> -o daml.js
 
-This command will generate a typescript project in the ``daml-ts`` folder that needs to be connected
-with your frontend code in ``ui``. To do so, navigate to ``daml-ts`` and run ``yarn install`` and
-then ``yarn workspaces run build``.
+This command will generate a typescript library for each DALF in you DAR.
+In ``create-daml-app``, ``ui/package.json`` refers to these libraries via the
+``"create-daml-app-0.1.0": "file:../daml.js/create-daml-app-0.1.0"`` entry in
+the ``dependencies`` field.
 
 .. TODO (drsk) this process is changing right now, make sure it is documented up to date here.
 

docs/source/getting-started/app-architecture.rst

@@ -93,7 +93,7 @@ The ``daml codegen ts`` command then takes this file as argument to produce a nu
 ::
 
     daml build
-    daml codegen ts .daml/dist/create-daml-app-0.1.0.dar -o daml-ts
+    daml codegen ts .daml/dist/create-daml-app-0.1.0.dar -o daml.js
 
 Now we have a TypeScript interface (types and companion objects) to our DAML model, which we'll use in our UI code next.
 

docs/source/getting-started/code/ui-after/MainView.tsx

@@ -4,7 +4,7 @@
 import React, { useMemo } from 'react';
 import { Container, Grid, Header, Icon, Segment, Divider } from 'semantic-ui-react';
 import { Party } from '@daml/types';
-import { User } from '@daml-ts/create-daml-app-0.1.0/lib/User';
+import { User } from '@daml.js/create-daml-app-0.1.0/lib/User';
 import { useParty, useExerciseByKey, useStreamFetchByKey, useStreamQuery } from '@daml/react';
 import UserList from './UserList';
 import PartyListEdit from './PartyListEdit';

docs/source/getting-started/first-feature.rst

@@ -74,7 +74,7 @@ Since we have changed our DAML code, we also need to rerun the TypeScript code g
 Open a new terminal and run the following commands::
 
   daml build
-  daml codegen ts .daml/dist/create-daml-app-0.1.0.dar -o daml-ts
+  daml codegen ts .daml/dist/create-daml-app-0.1.0.dar -o daml.js
 
 The result is an up-to-date TypeScript interface to our DAML model, in particular to the new ``Message`` template and ``SendMessage`` choice.
 

docs/source/getting-started/index.rst

@@ -70,7 +70,7 @@ Once the DAR file is created you will see this message in terminal ``Created .da
 Any commands starting with ``daml`` are using the :doc:`DAML Assistant </tools/assistant>`, a command line tool in the DAML SDK for building and running DAML apps.
 In order to connect the UI code to this DAML, we need to run a code generation step::
 
-    daml codegen ts .daml/dist/create-daml-app-0.1.0.dar -o daml-ts
+    daml codegen ts .daml/dist/create-daml-app-0.1.0.dar -o daml.js
 
 Now, changing to the ``ui`` folder, use Yarn to install the project dependencies and build the app::
 

templates/README.txt

@@ -39,7 +39,7 @@ package.json:
     },
     "private": true,
     "workspaces": [
-        "daml-ts",
+        "daml.js",
         "ui"
     ]
 }
@@ -49,7 +49,7 @@ using `daml-head` instead of `daml`.
 Specifically, you should run the following in the root directory:
 ```
 daml-head build
-daml-head codegen ts .daml/dist/create-daml-app-0.1.0.dar -o daml-ts
+daml-head codegen ts .daml/dist/create-daml-app-0.1.0.dar -o daml.js
 daml-head start
 ```
 

templates/create-daml-app/README.md

@@ -31,9 +31,9 @@ First, we need to generate TypeScript code bindings for the compiled DAML model.
 At the root of the repository, run
 ```
 daml build
-daml codegen ts .daml/dist/create-daml-app-0.1.0.dar -o daml-ts
+daml codegen ts .daml/dist/create-daml-app-0.1.0.dar -o daml.js
 ```
-The latter command generates TypeScript packages in the `daml-ts` directory.
+The latter command generates TypeScript packages in the `daml.js` directory.
 
 Next, navigate to the `ui` directory and install the dependencies and build the app by running
 ```
@@ -87,9 +87,8 @@ DAR `create-daml-app.dar` you have just created.
 To upload the UI, create a ZIP file containing all your UI assets by executing
 ```
 daml build
-daml codegen ts .daml/dist/create-daml-app-0.1.0.dar -o daml-ts/src
-yarn workspaces run build
-(cd ui && zip -r ../create-daml-app-ui.zip build)
+daml codegen ts .daml/dist/create-daml-app-0.1.0.dar -o daml.js
+(cd ui && yarn build && zip -r ../create-daml-app-ui.zip build)
 ```
 at the root of the repository. Afterwards, select the "UI Assets" tab of your
 chosen ledger on the DABL website, upload the ZIP file
@@ -106,7 +105,7 @@ Regardless of which direction you pick, the following files will be the most
 interesting ones to familiarize yourself with:
 
 - [`daml/User.daml`](daml/User.daml): the DAML model of the social network
-- [`daml-ts/src/create-daml-app-0.1.0/User.ts`](src/daml/User.ts) (once you've generated it):
+- [`daml.js/src/create-daml-app-0.1.0/User.ts`](src/daml/User.ts) (once you've generated it):
   a reflection of the types contained in the DAML model in TypeScript
 - [`ui/src/components/MainView.tsx`](ui/src/components/MainView.tsx):
   a React component using the HTTP Ledger API and rendering the main features

templates/create-daml-app/ui/package.json.template

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@daml.js/create-daml-app-0.1.0": "file:../daml-ts/create-daml-app-0.1.0",
+    "@daml.js/create-daml-app-0.1.0": "file:../daml.js/create-daml-app-0.1.0",
     "@daml/types": "__VERSION__",
     "@daml/ledger": "__VERSION__",
     "@daml/react": "__VERSION__",