sander/tsPlugins (#592)

* chore(monorepo): update angular version

* feat(scully) sample TS plugins

* test(lib): adding baseHref

* fix(scully): dont update scully routes in Angular watch mode

* fix(lib): move plugin source of fromData into corrrect file

* feat(lib): tS plugins

* fix(monorepo): import correct plugin path

* fix(scully): fix guesParser error

Author: SanderElias

.gitignore

@@ -42,5 +42,4 @@ testem.log
 Thumbs.db
 tests/cypress/screenshots
 tests/cypress/videos
-scully.sampleBlog.config.js
-scully.scullyDocs.config.js
+scully.*.config.js

apps/sample-blog/src/app/blog/blog.component.css

@@ -1,7 +1,13 @@
 h1 {
-  color: rgb(51, 6, 37);
-  background-color: rgb(248, 211, 236);
+  /* color: rgb(51, 6, 37); */
+  /* background-color: rgb(248, 211, 236); */
+  background-color: royalblue;
+  color: white;
+  width: 100%;
+  text-align: center;
   padding: 5px;
-  border-radius: 5px;
-  width: fit-content;
+  border-radius: 8px;
+  margin-top: 0.4rem;
+  margin-bottom: 0.4rem;
+  /* width: fit-content; */
 }

apps/sample-blog/src/app/user/user.component.ts

@@ -44,7 +44,9 @@ export class UserComponent implements OnInit {
 
   // This is an example of using TransferState
   user$ = isScullyGenerated()
-    ? this.transferState.getState<User>('user')
+    ? this.transferState
+        .getState<User>('user')
+        .pipe(tap(user => console.log('Incoming TSS user', user)))
     : this.apiUser$.pipe(
         tap(user => this.transferState.setState('user', user))
       );

demos/plugins/extra-plugin.js

@@ -117,7 +117,6 @@ published: false
 ---
 
 # Angular tutorial
-
 ```
 
 At the top of the file there is a frontmatter, a set of instructions Scully is using. Those are:
@@ -142,10 +141,8 @@ title: 'Angular tutorial'
 description: 'blog description'
 published: false
 slugs:
-    - ___UNPUBLISHED___kao8mvda_pmldPr7aN7owPpStZiuDXFZ1ILfpcv5Z
-
----
-# Angular tutorial
+  - ___UNPUBLISHED___kao8mvda_pmldPr7aN7owPpStZiuDXFZ1ILfpcv5Z
+---# Angular tutorial
 ```
 
 The property `slugs` have been added to the frontmatter above. `slugs` contains an anonymous URL as long as the property `published` is set to `false`. This is a URL that you can share with others to for example get feedback on your blog post before it goes live.
@@ -163,13 +160,13 @@ npm run scully serve
 The command will give an output looking like so:
 
 ```output
-Angular distribution server started on "http://localhost:1864/" 
+Angular distribution server started on "http://localhost:1864/"
 Scully static server started on "http://localhost:1668/"
 ```
 
 Open up a browser window and navigate to the URL `http://localhost:1668/`:
 
-Your blog post can be found on the URL `http://localhost:1668/blog/<anonymous slug>`, which if you check the frontmatter above means the following URL `http://localhost:1668/blog/___UNPUBLISHED___kao8mvda_pmldPr7aN7owPpStZiuDXFZ1ILfpcv5Z`. 
+Your blog post can be found on the URL `http://localhost:1668/blog/<anonymous slug>`, which if you check the frontmatter above means the following URL `http://localhost:1668/blog/___UNPUBLISHED___kao8mvda_pmldPr7aN7owPpStZiuDXFZ1ILfpcv5Z`.
 
 You should now see the following output in the browser:
 
@@ -189,6 +186,7 @@ title: 'Angular tutorial'
 description: 'blog description'
 published: true
 ---
+
 # Angular tutorial
 ```
 
@@ -227,6 +225,7 @@ description: 'blog description'
 published: true
 slug: angularjs-still-rocks
 ---
+
 # Angular tutorial
 ```
 
@@ -245,4 +244,3 @@ npm run scully serve
 ```
 
 The blog post can now be found at `http://localhost:1668/blog/angularjs-still-rocks`.
-

demos/plugins/extra-plugin.ts

@@ -1,6 +1,6 @@
 {
   "name": "@scullyio/ng-lib",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "repository": {
     "type": "GIT",
     "url": "https://github.com/scullyio/scully/tree/master/projects/scullyio/ng-lib"

docs/blog.md

@@ -192,10 +192,10 @@ export class TransferStateService {
    * Wraps an observable into scully's transfer state. If data for the provided `name` is
    * available in the state, it gets returned. Otherwise, the `originalState` observable will
    * be returned.
-   * 
+   *
    * On subsequent calls, the data in the state will always be returned. The `originalState` will
    * be returned only once.
-   * 
+   *
    * This is a convenience method which does not require you to use `getState`/`setState` manually.
    *
    * @param name state key

libs/ng-lib/package.json

@@ -0,0 +1 @@
+{ "extends": "../../../.eslintrc", "rules": {}, "ignorePatterns": ["!**/*"] }

libs/ng-lib/src/lib/transfer-state/transfer-state.service.ts

@@ -0,0 +1,4 @@
+# plugins-base-href-rewrite
+
+This is the Scully base-Href rewriting render plugin. You can add this to the postRenderer, or to the defaultPostRenderer to change the base HREF to whaevet you need.
+You can set the the base-HREF using the `setPluginUption('baseHref', {href:})`