create-daml-app: Import generated package without version (#5423)

Our plan for `daml2js` is to populate the `name` and `version` field
of the generated `package.json` files with the name and version of
the input DALF. Once this is done, you would expect to refer to the
package generated from `create-daml-app-0.1.0.dar` via
```typescript
import ... from '@daml.js/create-daml-app';`
```

Since we currently depend on the package by file paths anyway, we can
already pretend to have the right behavior in place.

In this style you can also depend on two different versions of the same
DAML package. This will happen during upgrades, a situation we're
already facing in DAVL. There it can be solved via the following two
lines in the `dependencies` field of the `package.json`:
```
  ...
  "davl-v4": "file:../daml.js/davl-0.0.4",
  "davl-v5": "file:../daml.js/davl-0.0.5",
  ...
```

CHANGELOG_BEGIN
CHANGELOG_END

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

@@ -89,7 +89,7 @@ corresponding typescript data definitions for the data types declared in the dep
 
 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
+``"create-daml-app": "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/code/test-before/index.test.ts

@@ -5,7 +5,7 @@ import { ChildProcess, spawn, SpawnOptions } from 'child_process';
 import waitOn from 'wait-on';
 
 import Ledger from '@daml/ledger';
-import { User } from '@daml.js/create-daml-app-0.1.0';
+import { User } from '@daml.js/create-daml-app';
 import { computeCredentials } from './Credentials';
 
 import puppeteer, { Browser, Page } from 'puppeteer';

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.js/create-daml-app-0.1.0/lib/User';
+import { User } from '@daml.js/create-daml-app';
 import { useParty, useExerciseByKey, useStreamFetchByKey, useStreamQuery } from '@daml/react';
 import UserList from './UserList';
 import PartyListEdit from './PartyListEdit';
@@ -15,9 +15,9 @@ import MessageList from './MessageList';
 
 const MainView: React.FC = () => {
   const username = useParty();
-  const myUserResult = useStreamFetchByKey(User, () => username, [username]);
+  const myUserResult = useStreamFetchByKey(User.User, () => username, [username]);
   const myUser = myUserResult.contract?.payload;
-  const allUsers = useStreamQuery(User).contracts;
+  const allUsers = useStreamQuery(User.User).contracts;
 
   // Sorted list of users that are following the current user
   const followers = useMemo(() =>
@@ -27,7 +27,7 @@ const MainView: React.FC = () => {
     .sort((x, y) => x.username.localeCompare(y.username)),
     [allUsers, username]);
 
-  const exerciseFollow = useExerciseByKey(User.Follow);
+  const exerciseFollow = useExerciseByKey(User.User.Follow);
 
   const follow = async (userToFollow: Party): Promise<boolean> => {
     try {

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

@@ -5,7 +5,7 @@
 import React from 'react'
 import { Form, Button } from 'semantic-ui-react';
 import { Party } from '@daml/types';
-import { User } from '@daml.js/create-daml-app-0.1.0';
+import { User } from '@daml.js/create-daml-app';
 import { useParty, useLedger } from '@daml/react';
 
 type Props = {

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

@@ -4,7 +4,7 @@
 // MESSAGELIST_BEGIN
 import React from 'react'
 import { List, ListItem } from 'semantic-ui-react';
-import { Message } from '@daml.js/create-daml-app-0.1.0';
+import { User } from '@daml.js/create-daml-app';
 import { useStreamQuery } from '@daml/react';
 
 /**

templates/create-daml-app/README.md

@@ -105,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.js/src/create-daml-app-0.1.0/User.ts`](src/daml/User.ts) (once you've generated it):
+- `daml.js/create-daml-app-0.1.0/src/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.js/create-daml-app-0.1.0",
+    "@daml.js/create-daml-app": "file:../daml.js/create-daml-app-0.1.0",
     "@daml/ledger": "__VERSION__",
     "@daml/react": "__VERSION__",
     "@daml/types": "__VERSION__",

templates/create-daml-app/ui/src/components/LoginScreen.tsx

@@ -5,7 +5,7 @@ import React, { useCallback } from 'react'
 import { Button, Form, Grid, Header, Image, Segment } from 'semantic-ui-react'
 import Credentials, { computeCredentials } from '../Credentials';
 import Ledger from '@daml/ledger';
-import { User } from '@daml.js/create-daml-app-0.1.0';
+import { User } from '@daml.js/create-daml-app';
 import { DeploymentMode, deploymentMode, ledgerId, httpBaseUrl, wsBaseUrl } from '../config';
 import { useEffect } from 'react';
 

templates/create-daml-app/ui/src/components/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.js/create-daml-app-0.1.0';
+import { User } from '@daml.js/create-daml-app';
 import { useParty, useLedger, useStreamFetchByKey, useStreamQuery } from '@daml/react';
 import UserList from './UserList';
 import PartyListEdit from './PartyListEdit';

templates/create-daml-app/ui/src/components/UserList.tsx

@@ -4,7 +4,7 @@
 import React from 'react'
 import { Icon, List } from 'semantic-ui-react'
 import { Party } from '@daml/types';
-import { User } from '@daml.js/create-daml-app-0.1.0';
+import { User } from '@daml.js/create-daml-app';
 
 type Props = {
   users: User.User[];