LZRMOEDR5B3UWE6WEZUWELAXGCQF2XZEK55EBSWJIPHIGQ3WHFOQC
# Pijul bug repro
- pijul init
- touch textfile
- echo "a" > textfile
- pijul add textfile
- pijul record -m "a"
- pijul fork other
- pijul channel switch other
- echo "b" >> textfile
now looks like:
```
a
b
```
- pijul record -m "b"
- sed ' 1 s/.*/&c/' -i textfile
now looks like:
```
ac
b
```
- pijul record -m "c"
- pijul channel switch main
- pijul apply THE_C_COMMIT
- pijul reset
the file now looks like:
```
ac
b
```
- pijul channel switch other
- echo "d" >> textfile
- pijul record -m "d"
- sed ' 1 s/.*/&e/' -i textfile
- pijul record -m "e"
- pijul channel switch main
- pijul apply THE_E_COMMIT
- pijul reset
the file now looks like:
```
ace
b
```
(the d was not applied)
- pijul apply THE_D_COMMIT
- pijul reset
- The D commit will show up in the log, but not in the text file. Switch to the other channel, then back to the main channel, and it will show up.
# Nextcloud News Vue Migration
#nextcloud #news #angular-vue
Notes about migrating from AngularJS to Vue.
Github PR: https://github.com/nextcloud/news/pull/1246
## Creating a Vue component
### Steps
The process for creating a Vue component is as follows:
1. Create your component in `js/vue_components/your_new_component.vue`.
2. Write tests for your component in `js/vue_components/tests/your_new_component_test.vue`.
3. `require` your component in `js/app/VueComponents.js`. This is the root that gets compiled with Webpack, and then concatenated with other, non-webpacked files.
### Why it's a little different
This repo predates Javascript modules; the old AngularJS code does not use modules. Instead, all JS code is concatenated into one big file. Therefore, all top-level variables are global and can be accessed by other files.
The Vue component compiler puts your Vue components into modules. As such, we use Webpack to compile Vue code into a bundle, and then concatenate that bundle with the rest of the Javascript code in order to make Vue components available to the older code.
## Bundle size
Packages | Size on disk | Transferred (after compression)
-----|----|-----
With Angular and Vue | 3.4 MB | 950 KB
Just Angular| 2.3 MB | 640 KB
Total JS downloads without Vue | 7.3 MB | 2400 KB
# Finalizing PR to use ng-vue
#nextcloud #news #angular-vue #task
To do:
- [ ] Add ng-vue package
- [ ] Add directory for Vue components
- [ ] Create webpack config to compile vue components
- [ ] Add webpacked bundle to gulp-concatenated bundle
- [ ] Make a grunt command for doing this
- [ ] Add to makefile
- [ ] Add jest package
- [ ] Add webpack config for compiling the test bundle
- [ ] Add a grunt command for running tests
- [ ] Add this to the CI somehow
- [ ] Convert part of the UI to vue as an example
- [ ] Write a README explaining the dev process
# Saturday, June 5, 2021
# Keyboard macro wants
```mermaid
graph LR;
tmux[Tmux] --> sh[split horizontal];
tmux --> sv[split vertical];
tmux --> close;
tmux --> add_window;
tmux --> join_pane;
g[vim git] --> log;
g --> status;
g --> commit;
g --> c[commit --amend];
g --> blame;
g --> p[push gerrit];
v[vim windows] --> sh;
v --> sv;
v --> close;
```
# Nextcloud Angular -> Vue conversion
#task #nextcloud #news #angular-vue #done
Next steps:
- [x] Get it working with an Angular controller that calls an API endpoint
- [ ] Figure out how to test Vue components
- [ ] See how much size is added to the bundle for having Vue in it now
- [ ] How does this affect load time?
## Getting it working with an Angular controller that calls an API endpoint
==Which one to use?==
What about the `markRead` function in the `ContentController.js`?
^ That is a good choice. Replace the `<li>` part on line 21 of `part.content.php` with a Nextcloud Vue component, and see how to pass in the `Content.markRead` function so that it can be called be the Vue component. I'm guessing that you could pass in the entire controller and call it that way. `Content.markRead` calls `ItemResounce.markItemRead`, which makes an API call.
^ This has been successful.
## April 9, 2021
Next step: replace something that would use a nextcloud vue component.
After that: replace something that has a loop.